Help with image hovers

Here is my website: http://www.adorability.org

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, so 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

UPDATE: I was able to make it work by adding the following:

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

if i recall

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



won't work in IE6 as it :hover only works with an anchor (a:hover)

not necessarily a huge issue but something to be aware of.

Hello Marshmelly,
I don't have IE6 to verify but I imagine Met is right.
It's all about specificity (http://www.w3.org/TR/CSS2/cascade.html) though.
This should work on your images in the sidebar and let you put your navigation back the way it was -
#sidebar a:hover img {
border:solid #EB7691 2px;
}

A similar approach would work for the links in your #navigation if you have images that are not in your #sidebar that you want to style this way.


An unrelated issue I noticed, it takes a long time for the squiggly line to appear under your links when you hover them. You should look into doing your rollovers using a single image - like this demo (http://nopeople.com/CSS/CSS_rollover/index.html)