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.
