Forum Moderators: not2easy

Message Too Old, No Replies

Issue with image hover in CSS

is there anyway to have an image hover not present in a certain class?

         

Marshmelly

7:23 pm on Dec 17, 2009 (gmt 0)

10+ Year Member



Basically, I want my images to have a 2px white border around them, and a 2px pink border on hover, which I was able to accomplish with this code:

a img {
border:solid #ffffff 2px;
}

a:hover img {
border:solid #EB7691 2px;
}

simple enough. But the thing is, I don't want this to affect the navigation images at the top of the page. I created a class just for the navigation images. Here is the code for that:

.imgrollover {
padding:0px;
border:0px;
}

As you can see, it gets rid of the white border which is good, but the pink hover border is still there. What should I do?

Thank you in advance

[edited by: tedster at 9:05 pm (utc) on Dec. 17, 2009]
[edit reason] no personal URLs, please [/edit]

Marshmelly

8:33 pm on Dec 17, 2009 (gmt 0)

10+ Year Member



I was able to figure it out! I added the following:

.imgrollover:hover {
border:0px;
padding:0px;
}

kas187

8:45 pm on Dec 19, 2009 (gmt 0)

10+ Year Member



Cool that you figured it out Marshmelly but you can optimise your css further. On the hover state you don't need to declare the width or type of border but just change the color like so:

a img {
border: 2px solid #fff;
}
a:hover img {
border-color: #eb7691;
}
: )