Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS remove an image and add a new image on mouse hover

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #26819
    akc
    Participant

    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.

    #66780
    evilhita666
    Member

    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…

    #66784
    Nert
    Member

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

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

    Best of luck.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.