1

I have most of my html text links defined as: 

a:hover {text-decoration:none; border-bottom:2px dotted #DB8D41}

But I also have images at http://communitychessclub.com/rabren/ which are links. I do not want the "border-bottom:2px dotted #DB8D41" to show under these images.

It is obvious that this below will not work:

a:hover img {border:none}
img, img:active { border: none }

Anybody have a solution?

verlager
  • 794
  • 5
  • 25
  • 43

1 Answers1

1

This seems to work: http://jsfiddle.net/44Pwr/

html

<div><a href=#"><img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif"></a><p>This is <a href="#">another link</a></p></div>

css

body { padding: 10px; background: #003; color: #999; }

a:link, a:visited { border-bottom: 1px solid #009; text-decoration: none; color: #CCC; }

a:hover, a:active { border-bottom: 1px solid #CCC; text-decoration: none; color: #CCC; }

a > img { display: block; border-bottom: 0; }
  • Your solution works. Now I gotta find out why it works; what the ">" accomplishes. – verlager Nov 05 '12 at 11:33
  • @verlager ">" means direct children – Th0rndike Nov 05 '12 at 11:35
  • Yep, more info at http://stackoverflow.com/questions/3225891/what-does-mean-in-css-rules –  Nov 05 '12 at 11:36
  • It's not exclusively the "a > img" that makes it work. You could use any img if you wanted it too. It's the "display: block;" that makes that magic happen. Meaning, making a 'border:0;' would not solve this issue alone (as you could see). Also 'border: 0;' is more efficient than just the 'border-bottom'. – Eric Wanchic Jun 16 '14 at 01:55