Image underline during hover

Discussion in 'CSS' started by Nevadasam, May 7, 2007.

  1. #1
    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?


    <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>
    
    Code (markup):
    Thanks for looking at this.

    Sam
     
    Nevadasam, May 7, 2007 IP
  2. jrd1mra

    jrd1mra Peon

    Messages:
    243
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #2
    did you try

    img a:hover instead?
     
    jrd1mra, May 7, 2007 IP
  3. Nevadasam

    Nevadasam Member

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #3
    Yes, I tried it both ways.
     
    Nevadasam, May 7, 2007 IP
  4. clicyu

    clicyu Peon

    Messages:
    22
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #4
    body img a:hover{text-decoration:none}
     
    clicyu, May 7, 2007 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #5
    a may not be a descendant of img.

    @ OP: As has been answered in another forum, you must apply a class token to the a, and style it without the border.

    Thanks for wasting people's time with your x-post.

    gary
     
    kk5st, May 8, 2007 IP