Image underline during hover

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
NevadaSam
Forum Newbie
Posts: 1
Joined: Sun Apr 29, 2007 10:14 pm

Image underline during hover

Post 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
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Post 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?
User avatar
danielwalters6
Forum Commoner
Posts: 31
Joined: Fri May 11, 2007 1:17 pm
Location: Cambridge, England, UK

Post 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.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
tecktalkcm0391
DevNet Resident
Posts: 1030
Joined: Fri May 26, 2006 9:25 am
Location: Florida

Post 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 */
} 
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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)
Post Reply