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

I'm currently trying to figure out if it is at all possible to show and hide the background image on a div with a hover state.
Here's some code: HTML

我目前正试图弄清楚是否可以在具有悬停状态的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;
}

So essentially I want to alternate between a background image and the background color, so when you hover over the div the background image is show, and on mouseout the background image is hidden and you revert to the background colour (silver).
I found this was do-able via pseudo classes but as this is for a CMS site the images will be changed on the fly, therefore they'll have to be inserted via html:

所以基本上我想在背景图像和背景颜色之间交替,所以当你将鼠标悬停在div上时,将显示背景图像,并且在mouseout上隐藏背景图像并恢复为背景颜色(银色)。我发现这可以通过伪类实现,但是因为这是一个CMS站点,图像将在运行中更改,因此它们必须通过html插入:

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

Is this at all possible to hide and show the background-image?

这是否可以隐藏和显示背景图像?

3 个解决方案

#1

Are you against using Javascript (or jQuery)?

你反对使用Javascript(或jQuery)吗?

If not, I have a solution using the .hover() function in jQuery. You said you didn't want to add new classes for new images. So I'm proposing you store the urls in the .thumb elements.

如果没有,我有一个使用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>

I stored each thumbnail's url in the data-hoverimage attribute (it can be whatever you want).

我将每个缩略图的url存储在data-hoverimage属性中(它可以是你想要的任何东西)。

Then, using jQuery, we can use the hover function. The first function is for when the cursor is over, the second for when the cursor is out.

然后,使用jQuery,我们可以使用悬停功能。第一个函数用于光标结束时,第二个函数用于光标何时结束。

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

I have a working model here: http://jsfiddle.net/auURQ/

我在这里有一个工作模型:http://jsfiddle.net/auURQ/

#2

Is there any reason you cannot use the :hover pseudo-class to make the image appear/disappear when hovered?

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

For example:

div {
    background-image: none;
}


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

#3

use this css

用这个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;
}

if you have different image per Div You have two way for this

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

1)make a share css for them and dedicated css for on hover image

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;
}

another way is use JS or JQuery Lib for set hover Event ,...

另一种方法是使用JS或JQuery Lib来设置悬停事件,...

#1