我有一个全屏背景图像,当鼠标悬停在一个 div 上时,我需要将其换成其他图像。我正在使用 jQuery 执行此操作 - 问题是加载时间相当长。
有没有一种方法可以使图像在第一次悬停时几乎同时出现?我的代码如下:
$("#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");
});
#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;
}
<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>
最佳答案
您可以在 CSS3 中执行此操作(大多数浏览器现在应该都支持)。即使 javascript 不会,它也将具有工作的优势。
你可以这样做:
.classToChange{
background: "oldbackground.jpg"
}
.classToHoverOver:hover .classToChange{
background: "newbackground.jpg"
}
关于jquery - 悬停时更改 CSS 背景图像的最佳方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42472163/