Question

我在使用<img>标记的网站上有一个图片，但我希望图片使用'background-image'属性嵌套在div中。问题是图片有：悬停我必须保留的财产。我可以将悬停效果放在背景图像上吗？

编辑：特别是我正在寻找的是使用这个花哨的webkit东西，通过滚动div来激活，这将影响图像，将其从b＆amp; w图像转换为颜色。我现在有这个工作，图像坐在一个实际的标签，但我不知道如何通过'：hover'

让它工作

例如：

div.cell:hover img{
opacity:1;
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
opacity:0.4;
}

这种方法很好，嵌套在标签内的图像，但如果我这样做

        .A1 {background-image:url('spindrift.jpg'); background-size:cover;}

显然，悬停效果不会起作用。如何在背景图像上使用悬停效果？

Answer 1

听起来你现在有这样的事情：

<div class="wrapper">
    <img class="theImage" src="theImage.png"/>
</div>

您目前在图片上悬停：

.theImage:hover {
  background-color: red;
}

正如Jakub在评论中所说，您可以将图像移动为背景图像，只需将鼠标悬停添加到div本身：

<div class="wrapper"></div>

.wrapper {
  background-image: url('theImage.png') no-repeat center;
}

.wrapper:hover {
  background-color: red;
}

Answer 2

是的，当您将属性放在包含background-image的元素时，这是可能的。不是背景图像本身。

只需删除图片（<img>）并更改CSS即可定位.background元素。然后将:hover更改为.background:hover，以便同时定位.background元素。容器div就是为了证明它是'嵌套'。

HTML

<div class="container">
    <div class="background"></div>
</div>

CSS

.background {
    background-image: url('path/to/img.jpg');
    width: 100px; /* width of the image */
    height: 100px; /* height of the image */
}
.background:hover {
    /* add new properties or change current ones */
}

是否可以在背景图像上使用CSS悬停属性？

2 个答案: