Page 1 of 1

Image underline during hover

Posted: Mon May 07, 2007 5:22 pm
by 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?

Code: Select all

<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

Posted: Tue May 08, 2007 5:48 pm
by califdon
I don't think you can distinguish between an image an a text link without using a different class, because the anchor <a> tag is independent of what you put between its opening and closing tag. What's wrong with just using a different class?

Posted: Fri May 11, 2007 4:12 pm
by danielwalters6
califdon wrote:I don't think you can distinguish between an image an a text link without using a different class, because the anchor <a> tag is independent of what you put between its opening and closing tag. What's wrong with just using a different class?
I think califdon has got it right, use a different class if you can.

Posted: Fri May 11, 2007 5:43 pm
by pickle
I'll be #3 to mirror that sentiment.

Using code like this:

Code: Select all

<a href = "mytest">test</a>
<a href = "mytest"><img src = "fnarf.gif"></a>
There's no way I know of to tell "test" to be underlined, but the image to not be.

You're going to have to add a class to the <a> tag around an image.

Also in your CSS for the a:hover img element, text-decoration would have no effect on whether the image is underlined or not. Like ~califdon said, the action & styles are applied to the <a> element regardless of what child elements they contain. So, strictly speaking, the image is never underlined, the link is & the image just happens to be inside the link.

It's also preferred that you use the [_syntax="css"][_/syntax] (without the underscores - had to put them in there so they wouldn't get parsed) when posting CSS.

Posted: Fri May 11, 2007 10:02 pm
by tecktalkcm0391
dunno if this will work but you can try:

Code: Select all

a img, 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 */
} 

Posted: Sat May 12, 2007 4:31 am
by Kieran Huggins
jQuery to the rescue?

Code: Select all

$(function(){
   $('a img').parent('a').css('border','0');
});
I know it's not ideal, but....

Of course, you'll need to include jQuery (link in my sig) but why wouldn't you? I mean really? It's just awesome. 8)