悬停时显示/隐藏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

是否有任何原因您不能使用:hover 伪类使图像在悬停时出现/消失？

例如：

div {
    background-image: none;
}


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

Answer 2

你反对使用 Javascript（或 jQuery）吗？

如果没有，我有一个使用 jQuery 中的 .hover() 函数的解决方案。您说您不想为新图像添加新类。所以我建议你将 url 存储在 .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>

我将每个缩略图的 url 存储在 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 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;
}

如果每个 Div 有不同的图像，你有两种方法

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 Lib 设置悬停事件，...