Jquery background image change on link mouseover and return on mouseout

Question

I have a background image set the following way:

#collection-5777203c893fc094ec1de004{
  background-image: url(https://static1.squarespace.com/static/57771b9e15d5dbc2f8fc084d/57771c55e3df28c63c9e687f/57771ca7440243196bc6801b/1467423990309/Gator.jpg?format=1500w);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

I have a link that I would like to trigger a background image change on hover and I would like it to return to the original image when not hovering over the link.

I have gotten the background image to change using this jquery:

<script>

  jQuery('#block-5777203c893fc094ec1de005').hover(function() 
{ 
    jQuery('#collection-5777203c893fc094ec1de004').css("background-image", "url(https://static1.squarespace.com/static/57771b9e15d5dbc2f8fc084d/57771c55e3df28c63c9e687f/57771d441b631b48a1362df6/1467424076131/patagoniawater.jpg?format=750w)"); 
}); 
</script>

Can someone show me the code to return the image back to its original background image when not hovering over the link?

The image also changes in a slightly glitchy way. I'm not sure if there is something I can do to make the change smoother.

Thanks in advance.

score 1 · Accepted Answer · answered Jul 13 '16 at 21:41

1

jQuery hover supports two events: handler "In" (mouseover) and handler "Out" (mouseout), so leverage those.

And, for convenience you can use jQuery css as a "getter" to get the original background image BEFORE modifying it.

// Since we're using these multiple times, assign them to variables
var $link = jQuery('#block-5777203c893fc094ec1de005');
var $image = jQuery('#collection-5777203c893fc094ec1de004');
// Get the original background image
var originalBackground = $image.css('background-image');
// jQuery hover supports TWO functions: first is "mouseover", second is "mouseout"
$link.hover(
    // On mouseover, replace image
    function() { 
        $image.css("background-image", "url(https://static1.squarespace.com/static/57771b9e15d5dbc2f8fc084d/57771c55e3df28c63c9e687f/57771d441b631b48a1362df6/1467424076131/patagoniawater.jpg?format=750w)"); 
    },
    // On mouseout, put original image back
    function() {
        $image.css('background-image', originalBackground);
    }
);

answered Jul 13 '16 at 21:41

random_user_name

25,694
7
76
115

Thanks so much! This has me on the right track! Can you look at my test page? https://josh-unger-2eb8.squarespace.com/swap/ The only thing that is strange to me is a slight glitch the first time I mouse over my link. After that, it goes back and forth smoothly. So stoked to finally be learning this stuff. @cale_b – junger Jul 13 '16 at 22:48
This answered my question. I think I just need to find a way to pre load all the background images for the first time hover to go a bit smoother. – junger Jul 14 '16 at 01:49
The reason it's not smooth on first hover is that you need to preload that other background image. You can do that like so: http://stackoverflow.com/a/476681/870729 – random_user_name Jul 14 '16 at 01:56
Excellent! Glad I could help. If you think this answer solved your problem, please upvote and / or accept the answer. – random_user_name Jul 15 '16 at 02:11

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

You can use simple CSS :hover as demonstrated in Snippet 1, or use mouseenter and mouseleave as demonstrated in Snippet 2. There are actually somethings that CSS does better than JS/jQ, this is one of the rare instances.

SNIPPET 1

.rollover {
  background: url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png) no-repeat;
  background-size: contain;
  width: 256px;
  height: 256px;
}
.rollover:hover {
  background: url(http://eightieskids.com/wp-content/uploads/2016/07/test-card-girl-feature.jpg) no-repeat;
  background-size: contain;
}

<div class='rollover'></div>

SNIPPET 2

$(function() {
  $(".rollover")
    .on("mouseenter", function() {
      var img1 = {
        backgroundImage: "url(http://eightieskids.com/wp-content/uploads/2016/07/test-card-girl-feature.jpg)"
      };
      $(this).css(img1);
    })
    .on("mouseleave", function() {
      var img2 = {
        backgroundImage: "url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png)"
      };
      $(this).css(img2);
    });
});

.rollover {
  background: url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png) no-repeat;
  background-size: contain;
  width: 256px;
  height: 256px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='rollover'></div>

score 0 · Answer 3 · answered Jul 13 '16 at 21:52

HTML:

<a id="mylink" href="link" style="yourstyle" onmouseover="overStyle(this)" onmouseout="outStyle(this)">TEXT</a>

jQuery:

function overStyle(object) 
{
  $('#mylink').css("background-image", "new image");
}

function outStyle(object) 
{
  $('#mylink').css("background-image", "old image");
}

Jquery background image change on link mouseover and return on mouseout

3 Answers3

SNIPPET 1

SNIPPET 2