我试图重新创建一个行为像这样一页一页的背景图像链接:预先载入图像对于改变
http://www.farmleague.us/team/
我成功地使用jQuery来获取背景图像悬停时改变我这个代码链接:
<script>
// Since we're using these multiple times, assign them to variables
var $link = jQuery('#block-yui_3_17_2_2_1468449172411_5050');
var $image = jQuery('#collection-5786be4ed482e9c3a905d937');
// Get the original background image
var originalBackground = $image.css("background-image", "url(https://static1.squarespace.com/static/57771b9e15d5dbc2f8fc084d/57771c55e3df28c63c9e687f/57771ca7440243196bc6801b/1467423990309/Gator.jpg?format=1500w)");
// 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/57771c55e3df2 8c63c9e687f/57771d441b631b48a1362df6/1467424076131/patagoniawater.jpg?format=750w)");
},
// On mouseout, put original image back
function() {
$image.css("background-image", "url(https://static1.squarespace.com/static/57771b9e15d5dbc2f8fc084d/57771c55e3df28c63c9e687f/57771ca7440243196bc6801b/1467423990309/Gator.jpg?format=1500w)", originalBackground);
}
); </script>
然而,我第一次悬停在一个链接,有一瞬间,其中的背景去其设置为透明的默认背景色。一旦我在链接上悬停一次,背景图像之间来回变换,没有背景颜色,所以我猜如果我加载图像,我不会看到背景颜色。
任何帮助将不胜感激!