I imagine this is trivial - in fact it must have been asked before, I just can't find the answer. I have looked! :-)

I have a dotted bottom border defined on my link hovers, like so:

1. <a href='#'>Home</a>
2. a:hover {
3.         border-bottom: 1px dotted #000099;
4. }

But on links that contain images, I want to remove the border.

So,

<a href='#'><img src='home.png'></a>

Should have no border-bottom.

I've tried:

$('a:hover img').parent().css('border','none');

in the document.ready(), but that clearly is not the answer.

Anybody able to help?

Thanks,

A.