Grow your CSS skills. Land your dream job.

remove an image and add a new image on mouse hover

  • akc
    # November 18, 2009 at 1:36 pm

    Hi All,
    I’ve an image in a div that just sites in that div. What I want to do is to remove this image on mouse hover and display a new image on the same mouse hover. How can achieve this?

    Thanks a lot.

    # November 18, 2009 at 3:47 pm

    I would do it using jQuery, if you can have it available in your project… It would be something along the lines of:

    Code:
    $(“img”).hover(function(){
    $(this).attr(“src”, “images/newImage.png”);
    }, function(){
    $(this).attr(“src”, “images/oldImage.png”);
    };
    });

    Alternatively (and probably better depending on what you’re trying to achieve), you could use a <div> or <a> element with a background image, and use CSS sprites + jQuery to get those same results…

    # November 18, 2009 at 8:35 pm

    If this does not I would recommed using a sprite to accomplish this. There are articles all over this site. Check link below.

    http://css-tricks.com/css-sprites/

    Best of luck.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

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