Jquery背景图像更改链接鼠标悬停并返回mouseout

时间:2016-07-13 21:37:54

标签: jquery

我有以下方式设置背景图片:

#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;
}

我有一个链接,我想在悬停时触发背景图像更改,我希望它不会悬停在链接上时返回到原始图像。

我已经使用这个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>

有人可以向我显示代码,以便在不悬停在链接上时将图像返回到原始背景图像吗?

图像也会稍微改变一下。我不确定我能做些什么来使变化更顺畅。

提前致谢。

3 个答案:

答案 0 :(得分:1)

jQuery hover支持两个事件:处理程序“In”(鼠标悬停)和处理程序“Out”(mouseout),因此利用它们。

并且,为方便起见,您可以使用jQuery css作为“getter”来获取原始背景图像,然后再修改它。

// 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);
    }
); 

答案 1 :(得分:0)

您可以使用Snippet 1中演示的简单CSS :hover,或者使用片段2中演示的mouseenter and mouseleave。实际上有些东西比JS / jQ更好,这是其中之一罕见的情况。

SNIPPET 1

&#13;
&#13;
.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;
}
&#13;
<div class='rollover'></div>
&#13;
&#13;
&#13;

SNIPPET 2

&#13;
&#13;
$(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);
    });
});
&#13;
.rollover {
  background: url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png) no-repeat;
  background-size: contain;
  width: 256px;
  height: 256px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='rollover'></div>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

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");
}