Question

我有一个全屏背景图像，当我将鼠标悬停在div上时，我需要将其替换为其他图像。我是用jQuery做的 - 这个问题是一个相当重要的加载时间。

有没有办法对其进行构造，以便图像在第一个悬停时近乎瞬间出现？我的代码如下：

＆＃13;

$("#hover-bg-2").mouseover(function() {
  $("#container").css("background", "url(/assets/image-2.jpg)");
  $("#container").css("-webkit-background-size", "cover");
  $("#container").css("-moz-background-size", "cover");
  $("#container").css("-o-background-size", "cover");
  $("#container").css("background-size", "cover");
});

＆＃13;

#container {
  width: 100vw;
  height: 100vh;
  
  /* ORIGINAL IMAGE BEFORE CHANGE */
  background: url(/assets/image-1.jpg) no-repeat center center fixed;
  
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="bg-hover">
    <div id="hover-bg-2" style="cursor: pointer;">
      <p>BG 2</p>
    </div>
  </div>
</div>

＆＃13;

Answer 1

您可以在CSS3中执行此操作（大多数浏览器现在应该支持此功能）。即使javascript不行，它也将具有工作的优势。

你可以这样做：

.classToChange{
    background: "oldbackground.jpg"
}

.classToHoverOver:hover .classToChange{
      background: "newbackground.jpg"
}

Answer 2

您可以使用鼠标事件更改容器的class，最初加载css，只需使用class更改容器的Jquery

例如：

$("#hover-bg-2").hover(function() {
  $('#container')
    .removeClass("class_default")
    .addClass("other");
}, function() {
  $('#container')
    .removeClass("other")
    .addClass("class_default");;
});

.class_default {
  /* your style goes here */
  background: red;
}
.other{
background:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" class="class_default">

  <div class="bg-hover">
    <div id="hover-bg-2" style="cursor: pointer;">
      <p>BG 2</p>
    </div>

  </div>

Answer 3

{p> Link Prefetching在<head>中是减少加载时间的最简单方法，无论您使用何种交换方法。

<link rel="prefetch" href="/images/big.jpeg">

我不确定为什么Safari不支持此功能，但the other browsers do。

在悬停时更改CSS背景图像的最佳方法

3 个答案: