Targetting linked images hover state

[cadence]

Hello everybody,

I want all of the links in my website to have a dotted bottom border in their hover state, so I applied this selector to my main stylesheet:

a {
color:#4e88c3;
text-decoration:none;
}
a:hover {
border-bottom:1px dotted #4e88c3;
}

img {
border:0px;
}

The problem is, when you hover over an anchored image like this:

<a href="/"><img src="image.jpg"></a>

The dotted border appears underneath the image!

So my question is, how do I go about telling the image that it should never have a border, particularly in a hover state.

I have tried several variations, but haven't been able to find one that works. This is what I've tried so far (a few of them look kind of ridiculous, but I'm desperate!):

a:hover img {
border:0px none;
}

img:hover {
border-bottom:none;
}

a:hover img {
border-bottom:none;
}

a:hover img:hover {
border-bottom:none;
}

a img:hover {
border-bottom:none;
}

Any help that could be offered would be very much appreciated! Thank you!

Cadence

[Robin_reala]

You can’t do exactly what you’re asking for. The border is applied to the <a>, and CSS only works down the tree, not back up it again - i.e. you can’t adjust the <a> depending on what children it might or might not have.

The best thing you can do here is add a class onto <a>s that contain images to override your original rule:

a:hover { border-bottom:1px dotted #4e88c3; }
a.picture:hover { border-bottom: 0; }

[Birdman]

How about a class for the anchors with only an image?

.img_link:link, .img_link:hover {border: none}

<a href="/" class="img_link"><img src="image.jpg"></a>

[cadence]

Great, I think that should work. I appreciate the suggestions!