最好的方法來改變懸停的CSS背景圖像

我有一個全屏幕背景圖像，當鼠標懸停在div上時，我需要換出其他圖像。我正在用jQuery來做這件事 - 問題是存在相當大的加載時間。最好的方法來改變懸停的CSS背景圖像

有沒有一種方法來構造這樣的圖像，使圖像在第一次懸停時幾乎同時出現？代碼下面我有：

$("#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>

來源

2017-02-26 SamYoungNY

圖像大小是多少？ – lomboboo

我會注意到的一件事是，不需要在JavaScript中設置背景屬性，因爲只有URL正在更改。我還會修改CSS以使用'background-image'而不是'background'，而是單獨指定其他背景屬性，因爲您再次只是換出網址，因此無需重複此信息。 'background-position'，'background-repeat'等。 – nickrigby

圖片是1200 x 675 @lomboboo – SamYoungNY

可以在CSS3做到這一點（大多數瀏覽器現在應該支持這一點）。它也將有工作的好處，即使JavaScript不會。

你可以用這個做到這一點：

.classToChange{ 
    background: "oldbackground.jpg" 
} 

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

來源

2017-02-26 18:12:51 Alex

你可以使用鼠標事件改變你的容器的class，加載CSS最初，使用Jquery

例如只是改變你的容器class ：

$("#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>

來源

2017-02-26 18:15:19

Link Prefetching您的<head>是減少加載時間的最簡單方法，無論您使用何種方法交換方法。我不知道爲什麼Safari不支持這個，但the other browsers do。

來源

2017-02-26 18:16:28 Gwellin

最好的方法來改變懸停的CSS背景圖像

回答

相關問題