Grow your CSS skills. Land your dream job.

Image change on hover without link

  • # October 19, 2010 at 9:20 am

    Hello!

    Imagine two Photoshop layers, the bottom one has an orange image, and the top one contains a black image. When the mouse is hovering these images, the black image will disappear, and the orange image will appear. I’m looking for a CSS-trick which makes it possible for me to this, but WITHOUT any link-tags.

    Thanks in advance,
    Kralle

    # October 19, 2010 at 9:22 am

    img:hover

    # October 19, 2010 at 9:48 am

    I don’t think there’s anything called img:hover?

    # October 19, 2010 at 9:52 am

    Thats correct. Don’t ask me why I put that. What you can do is use a:hover and in the HTML put a # symbol in for the link.

    # October 19, 2010 at 9:59 am

    I know that. :) But I’m looking for a way to do this without any links.

    # October 19, 2010 at 10:11 am

    Stumped

    # October 19, 2010 at 1:35 pm

    whats wrong with using links?

    # October 19, 2010 at 3:55 pm

    You can do it like this:

    HTML

    Some text can go here



    CSS
    #switch {
    display: block;
    width: 250px;
    height: 250px;
    background: #000;
    }
    #switch:hover {
    background-color: #FF6600;
    background-position: 0 -250px;
    }
    #switch p{
    text-indent: -9999px;
    }

    I just used background colours, but you can use background images too.

    # October 19, 2010 at 4:43 pm

    This sounds like a job for sprites



    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">












    # October 20, 2010 at 3:10 am

    I believe the best solution for image changes on hover without links is javascript or jQuery to be more precise…

    Bob
    # October 20, 2010 at 11:57 am

    I’d go with marcdefiants solution indeed. The problem with the :hover pseudo class is that it isn’t supported by IE5/6 on all elements, only on anchor links.

    # October 20, 2010 at 3:44 pm

    The code would be somethin like this:

    $('#switch').hover(function(){
    $(this).css({
    backgroundPosition: '-150px 45px'
    });
    }, function(){
    $(this).css({
    backgroundPosition: '50px -100px'
    });
    });
    # October 20, 2010 at 5:37 pm

    err, there *is* such a thing as img:hover, i don’t know when the last time was i heard that :hover only works on links, that’s only ie5

    # October 20, 2010 at 7:01 pm

    so img:hover does work?

    Bob
    # October 21, 2010 at 2:36 am

    Yes, it should. The :hover pseudo class was originally designed for links, but after that, they also made it available to all other elements.

Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".