1

我目前正在尝试确定是否可以在具有悬停状态的 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')"

这完全可以隐藏和显示背景图像吗？

4

3 回答 3

3

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

例如：

div {
    background-image: none;
}


div:hover {
    background-image: url('insert url here');
}
于 2013-02-07T20:40:34.097 回答
2

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

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

于 2013-02-07T21:57:18.423 回答
0

使用这个 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 设置悬停事件，...

于 2013-02-07T20:42:37.930 回答