Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with image hovers

    Here is my website: http://www.adorability.org

    Basically, I want my images to have a 2px white border around them, and a 2px pink border on hover, which I was able to accomplish with this code:

    a img {
    border:solid #ffffff 2px;
    }

    a:hover img {
    border:solid #EB7691 2px;
    }

    simple enough. But the thing is, I don't want this to affect the navigation images at the top of the page, so I created a class just for the navigation images. Here is the code for that:

    .imgrollover {
    padding:0px;
    border:0px;
    }

    As you can see, it gets rid of the white border which is good, but the pink hover border is still there. What should I do?

    Thank you in advance

    UPDATE: I was able to make it work by adding the following:

    .imgrollover:hover {
    border:0px;
    padding:0px;
    }
    Last edited by Marshmelly; 12-17-2009 at 08:35 PM. Reason: resolved problem

  • #2
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    if i recall
    Code:
    .imgrollover:hover {
    border:0px;
    padding:0px;
    }

    won't work in IE6 as it :hover only works with an anchor (a:hover)

    not necessarily a huge issue but something to be aware of.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Marshmelly,
    I don't have IE6 to verify but I imagine Met is right.
    It's all about specificity though.
    This should work on your images in the sidebar and let you put your navigation back the way it was -
    Code:
    #sidebar a:hover img {
    border:solid #EB7691 2px;
    }
    A similar approach would work for the links in your #navigation if you have images that are not in your #sidebar that you want to style this way.


    An unrelated issue I noticed, it takes a long time for the squiggly line to appear under your links when you hover them. You should look into doing your rollovers using a single image - like this demo
    Last edited by Excavator; 12-17-2009 at 11:37 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •