显示/隐藏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库设置悬停事件，...