顯示/隱藏div懸停的背景圖像

Question

我目前正試圖弄清楚是否可以在懸浮狀態的div上顯示和隱藏背景圖像。
下面是一些代碼： HTML

<div class="thumb"> 
    <div class="text"> 
     Header<br> 
     Sub-header<br><br> 
     Date 
    </div> 
</div> 

<div class="thumb"> 
    <div class="text"> 
     Header<br> 
     Sub-header<br><br> 
     Date 
    </div> 
</div> 

<div class="thumb"> 
    <div class="text"> 
     Header<br> 
     Sub-header<br><br> 
     Date 
    </div> 
</div> 

CSS

.thumb { 
    width: 400px; 
    height: 250px; 
    background-color: silver; 
    font-weight: bold; 
    background: url("http://www.imageurlhere.com") no-repeat 50% 50%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

.text { 
    padding: 15px; 
} 

所以基本上我想有一個背景圖像和背景顏色之間交替，所以當你將鼠標懸停在DIV的背景影像展，並在鼠標懸停背景圖像被隱藏，你回到背景顏色（銀）。
我發現這是做，能夠通過僞類，但因爲這是一個CMS網站上的圖片將在飛行中改變，因此他們將不得不通過HTML中插入：

style="background-image: url('insert url here')" 

這是儘可能隱藏並顯示背景圖片？

Answer 1

你是否反對使用JavaScript（或jQuery）？

如果沒有，我有一個解決方案，使用jQuery中的.hover()函數。你說你不想爲新圖像添加新類。因此，我建議您將網址存儲在.thumb元素中。

HTML：

<div class="thumb" data-hoverimage="http://placekitten.com/250/400"> 
    <div class="text">Header 
     <br>Sub-header 
     <br> 
     <br>Date</div> 
</div> 
<div class="thumb" data-hoverimage="http://placekitten.com/250/300"> 
    <div class="text">Header 
     <br>Sub-header 
     <br> 
     <br>Date</div> 
</div> 
<div class="thumb" data-hoverimage="http://placekitten.com/400/250"> 
    <div class="text">Header 
     <br>Sub-header 
     <br> 
     <br>Date</div> 
</div> 

我存儲在每個縮略圖的網址在data-hoverimage屬性（它可以是任何你想要的）。

然後，使用jQuery，我們可以使用懸停功能。第一個function用於光標結束時，光標結束時的第二個。

$(".thumb").hover(function(){ 
    var imgurl = $(this).data("hoverimage"); 
    $(this).css("background-image", "url(" + imgurl + ")") 
}, function(){ 
    $(this).css("background-image", ""); 
}); 

我這裏有一種工作模式：http://jsfiddle.net/auURQ/

Answer 2

是否有任何理由不能使用:hover僞類使圖像在盤旋時出現/消失？

例如：

div { 
    background-image: none; 
} 


div:hover { 
    background-image: url('insert url here'); 
} 

Answer 3

使用這個CSS

.thumb:hover{ 
    background: url("http://www.imageurlhere.com") no-repeat 50% 50%; 
} 
.thumb { 
     width: 400px; 
     height: 250px; 
     background-color: silver; 
     font-weight: bold; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
} 

.text { 
    padding: 15px; 
} 

，如果你每格有不同的圖像，您有這個

1雙向），使他們共享的CSS和懸停圖像專用CSS

#thumb1:hover{ 
    background: url("http://www.imageurlhere.com") no-repeat 50% 50%; 
} 
#thumb2:hover{ 
    background: url("http://www.imageurlhere.com") no-repeat 50% 50%; 
} 
.thumb { 
     width: 400px; 
     height: 250px; 
     background-color: silver; 
     font-weight: bold; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
} 

.text { 
    padding: 15px; 
} 

另一種方法是使用JS或JQuery庫設置懸停事件，...