我有一个背景图像设置方式如下:
#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>有人可以向我显示代码,以便在不悬停在链接上时将图像返回到原始背景图像吗?
图像也会稍微改变一下。 我不确定我能做些什么来使变化更顺畅。
提前致谢。
I have a background image set the following way:
#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; }I have a link that I would like to trigger a background image change on hover and I would like it to return to the original image when not hovering over the link.
I have gotten the background image to change using this 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>Can someone show me the code to return the image back to its original background image when not hovering over the link?
The image also changes in a slightly glitchy way. I'm not sure if there is something I can do to make the change smoother.
Thanks in advance.
最满意答案
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); } );jQuery hover supports two events: handler "In" (mouseover) and handler "Out" (mouseout), so leverage those.
And, for convenience you can use jQuery css as a "getter" to get the original background image BEFORE modifying it.
// 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); } );更多推荐
发布评论