Jquery背景图像在链接鼠标悬停时更改并在鼠标悬停时返回答案

【问题标题】：Jquery background image change on link mouseover and return on mouseoutJquery背景图像在链接鼠标悬停时更改并在鼠标悬停时返回
【发布时间】：2016-07-13 21:37:54
【问题描述】：

我有一个背景图像设置如下：

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

谁能告诉我在不将鼠标悬停在链接上时将图像返回到其原始背景图像的代码？

图像也发生了轻微的变化。我不确定是否可以做些什么来使更改更顺利。

提前致谢。

【问题讨论】：

标签： jquery

【解决方案1】：

jQuery hover 支持两个事件：处理程序“In”（鼠标悬停）和处理程序“Out”（鼠标移出），因此请利用它们。

并且，为方便起见，您可以使用 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);
    }
);

【讨论】：

非常感谢！这让我走上了正轨！你能看看我的测试页吗？ josh-unger-2eb8.squarespace.com/swap 唯一对我来说奇怪的是我第一次将鼠标悬停在我的链接上时出现了一个小故障。之后，它来回顺利。很高兴终于学会了这些东西。 @cale_b
这回答了我的问题。我想我只需要找到一种方法来预加载所有背景图像，以便第一次悬停时更流畅。
第一次悬停不流畅的原因是您需要预加载其他背景图像。你可以这样做：stackoverflow.com/a/476681/870729
太棒了！很高兴我能帮助你。如果您认为此答案解决了您的问题，请点赞和/或接受答案。

【解决方案2】：

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

【讨论】：

【解决方案3】：

您可以使用简单的 CSS :hover，如 Snippet 1 所示，或使用 mouseenter and mouseleave，如 Snippet 2 所示。实际上 CSS 在某些方面比 JS/jQ 做得更好，这是极少数情况之一。

片段 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;
}

&lt;div class='rollover'&gt;&lt;/div&gt;

片段 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>

【讨论】：