469,602 Members | 1,623 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,602 developers. It's quick & easy.

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?


Expand|Select|Wrap|Line Numbers
  1. <style type="text/css">
  2.  
  3. img {
  4.     background-color:#FFFFFF;
  5.     border: 1px solid #ff12fc;
  6.     padding: 5px;
  7.     margin: 5px 5px 0 0;
  8. }
  9.  
  10. a:hover {
  11.     color:#666;
  12.     text-decoration: none;
  13.     border-bottom:dotted;
  14. }
  15.  
  16. a:hover img {
  17.     background-color:#00FF00;
  18.     border: 1px solid #ff12fc;
  19.     padding: 5px;
  20.     margin: 5px 5px 0 0;
  21.     text-decoration: none; /* the underline shouldn't show, but it does */
  22. }
  23.  
  24. </style>
  25.  
Thanks for looking at this.

Sam
May 7 '07 #1
1 14450
pbmods
5,821 Expert 4TB
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:

Expand|Select|Wrap|Line Numbers
  1.         a:first-child:hover {
  2.             border-bottom: 5px dashed #666;
  3.         }
  4.  
  5.         a:hover > img {
  6.             background-color:#00FF00;
  7.             border: 1px solid #ff12fc;
  8.         }
  9.  
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:

Expand|Select|Wrap|Line Numbers
  1.         a:hover {
  2.             color:#666;
  3.             text-decoration: none;
  4.         }
  5.  
  6.         a > *:hover {
  7.             border-bottom: 5px dashed #999999;
  8.         }
  9.  
  10.         a:hover > img {
  11.             background-color:#00FF00;
  12.             border: 1px solid #ff12fc;
  13.         }
  14.  
[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
May 8 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

5 posts views Thread by Chris Beall | last post: by
9 posts views Thread by David Ross | last post: by
2 posts views Thread by mike | last post: by
29 posts views Thread by jmaxsherkimer | last post: by
7 posts views Thread by Cate Archer | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.