"hover" text decoration affects all images, SO frustrating...

Discussion in 'CSS' started by Pixelrage, Dec 27, 2007.

  1. #1
    This is what I have in my stylesheet for "hover" links:

    a:hover {
    	color: #3cc6f3;
    	background-color: #000000;
    	text-decoration: underline;
    	}
    Code (markup):
    As you can see, it gives all links a #000000 (black) background & underline when you hover over them. However it also does this to any image wrapped in an A HREF tag, as well. Nothing I do can make it stop affecting images - I've even created a new value in the stylesheet for links that won't have a background color, and applied them to the hyperlinked images - and it still won't work.

    I basically give up because I'm wasting too much time on something very trivial. I'd really appreciate if someone can let me know how to keep the link backgrounds in my stylesheet, but get them to leave hyperlinked images alone!
     
    Pixelrage, Dec 27, 2007 IP
  2. logylaps

    logylaps Active Member

    Messages:
    761
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    85
    #2
    change it to:
    .overeffect a:hover {
    color: #3cc6f3;
    background-color: #000000;
    text-decoration: none;
    }

    and the links you want effected to:
    <a href="somepage.html" class="overeffect">Some Page</a>
     
    logylaps, Dec 27, 2007 IP
  3. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #3
    a img:hover {
    	background:none;
    	text-decoration: none;
    	}
    
    Code (markup):
     
    blueparukia, Dec 27, 2007 IP
  4. Pixelrage

    Pixelrage Peon

    Messages:
    5,083
    Likes Received:
    128
    Best Answers:
    0
    Trophy Points:
    0
    #4
    logylaps - wouldn't that mean that I'd have to do that to every single regular link? I'd want to keep the global links as is with their black hover backgrounds, but prevent the hyperlinked images from getting the black background.

    blueparukia - that didn't do it :( I don't know why. In firefox, it removes the black highlight off a hovered image, but the TD behind it still lights up black. In IE, the entire thing (image and all) lights up black.
     
    Pixelrage, Dec 27, 2007 IP
  5. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #5
    Assuming your code goes <a><img /></a> my code should work. You have it being declared elsewhere if that is still happening.
    You could try this:

    
    a img
    {
    background:none;
    border:none;
    text-decoration:none;
    }
    
    //Shouldn't need the below, but try with and without it
    a img:hover {
    	background:none;
    	text-decoration: none;
    	}
    
    
    Code (markup):
    I have tested and that works in all browsers,

    BP
     
    blueparukia, Dec 27, 2007 IP
    digitalmatch likes this.
  6. logylaps

    logylaps Active Member

    Messages:
    761
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    85
    #6
    If that dosnt fix it, give us a url so we could test it before giving answers. It helps alot more ;)
     
    logylaps, Dec 27, 2007 IP
  7. forelmashi

    forelmashi Peon

    Messages:
    188
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #7
    instead of a img:hover

    a:hover img
     
    forelmashi, Dec 27, 2007 IP
  8. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #8
    Ahh right, my bad there,

    BP
     
    blueparukia, Dec 28, 2007 IP