How to create a mouseover for posts

[dani555]

Hi everybody
How to create a mouseover for posts
[My Site](http://www.retete-super.ro “”)
I have 10 posts on the front page color #ECF0F4
I want to change the color when you put your mouse over the post in color #99ADC2
Thank you!

[Kitty Giraudel]

What about the :hover pseudo-class?

[dani555]

I want to do mouseover for posts
exactly as in the example
[Example](http://http://www.daikin.ro/support-and-manuals/index.jsp “”)

[Paulie_D]

Link doesn’t work AND you don’t seem to have listened to @HugoGiraudel

[dani555]

[site example](http://www.daikin.ro/support-and-manuals/index.jsp “”)

[Paulie_D]

We know what it looks like…have you considered the suggestion from @HugoGiraudel ?

Do you know how to apply it?

I’m guessing something like…

.art-post-inner:hover {
background: insert your color;
}

[Alen]

.art-post-body:hover {
background-color: #99ADC2;
}

You could use that, but you are using :before :after to add background images (rounded corners). I would suggest refactoring the code and using CSS instead of images… then it would be much easier to apply hover fx.

Hope that helps,
Alen

[Paulie_D]

@AlenAbdula Yeah…that was my next thing… :)

[dani555]

Hi everyone,
We have added the following code
The code is:
.art-post-body:hover {
background-color: #99ADC2;
}
I see a rectangle instead of a rounded rectangle
You may have to add code?
Thank you!

.art-post
{
max-width:974px;
margin: 7px;
}
.art-post-body
{
padding:14px;
min-width:2px;
min-height:2px;
}
.art-post:before, .art-post:after
{
content: url(‘images/post_t.png’);
font-size: 0;
background-image: url(‘images/post_b.png’);
}
.art-post:after{
clip:rect(auto, auto, auto, 959px);
}
.art-post:before,.art-post-body:before{
right:15px;
}
.art-post-body:after{
width: 15px;
top:15px;
bottom:15px;
background-image:url(‘images/post.png’);
}
.art-post-body:hover {
background-color: #99ADC2;
}
.art-post-body:before{
top:15px;
bottom:15px;
background-image:url(‘images/post.png’);
}


[dani555]

Does anyone know what needs to be changed?

[Paulie_D]

You would have to stop using the images for the borders/border-radius….are you willing to do that?

[dani555]

Otherwise you can’t do
Thank you

[Paulie_D]

>Otherwise you can’t do Thank you

Nope…you are using background images for the backgrounds and borders.

I suppose you could use different images in the hover states but, frankly, there is nothing there that actually **requires** images.

The borders / border radius and backgrounds can all be replicated with CSS as far as I can see. The radius would not show below IE9 but that isn’t a big loss.

[Author]

Posts