我有以下方式设置背景图片:
#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>
有人可以向我显示代码,以便在不悬停在链接上时将图像返回到原始背景图像吗?
图像也会稍微改变一下。我不确定我能做些什么来使变化更顺畅。
提前致谢。
答案 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更好,这是其中之一罕见的情况。
.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;
$(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;
答案 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");
}