Image underline during hover

[NevadaSam]

I want to use a dotted underline when I hover over a text link, but I don't want this to show up when I hover over a image link. Is there a way I can do this without calling a different class when I have an image link?

<style type="text/css">

img {
	background-color:#FFFFFF;
	border: 1px solid #ff12fc;
	padding: 5px;
	margin: 5px 5px 0 0;
}

a:hover {
	color:#666;
	text-decoration: none;
	border-bottom:dotted;
}

a:hover img {
	background-color:#00FF00;
	border: 1px solid #ff12fc;
	padding: 5px;
	margin: 5px 5px 0 0;
	text-decoration: none; /* the underline shouldn't show, but it does */
}

</style>

Thanks for looking at this.

Sam

[pbmods]

I want to use a dotted underline when I hover over a text link, but I don't want this to show up when I hover over a image link. Is there a way I can do this without calling a different class when I have an image link?

Unfortunately not, because the A element is what has the dotted border, not the image.

[EDIT: And now I completely refute what I just said :P]
Now, you can specify the child of the A element instead using:

		a:first-child:hover {
			border-bottom: 5px dashed #666;
		}
		
		a:hover > img {
			background-color:#00FF00;
			border: 1px solid #ff12fc;
		}

But this doesn't work in IE. Which is another rant for the next few years.

Now, this works in Safari, but I don't know if it'll work in IE:

		a:hover {
			color:#666;
			text-decoration: none;
		}
				
		a > *:hover {
			border-bottom: 5px dashed #999999;
		}
		
		a:hover > img {
			background-color:#00FF00;
			border: 1px solid #ff12fc;
		}

[Incidentally, '>' means 'child', so the rule will only be triggered for an element that is a child node [as opposed to a descendent] of the A element.]

For more info on CSS selectors, check out this document:

http://css.maxdesign.com.au/selectutorial/index.htm