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上时，将显示背景图像，并且在mouseout上隐藏背景图像并恢复为背景颜色（银色）。
我发现这可以通过伪类实现，但由于这是针对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()函数的解决方案。你说你不想为新图像添加新类。因此，我建议您将网址存储在.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 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来设置悬停事件，...

在悬停时显示/隐藏div的背景图像

3 个答案: