Question

我希望能够将鼠标悬停在图像上，并且只将背景本身变为黑色（使用不透明度来控制多少）。当它悬停时，我已经对图像本身产生了影响，但我想添加一个效果，其中白色的背景变成更暗的颜色。以后能够以不透明度和过渡来操作它是最好的，但是到目前为止我还没有找到适用于此目的的css3或jquery代码来使我达到这一点。任何帮助将不胜感激。

HTML

<div class="template_design2" style="margin-top:100px; margin-left:5px;"></div>

CSS

.template_design2 {
    background-image:url(img/template_design2.jpg); 
    width:740px;
    height:280px;
    background-repeat:no-repeat;
    float:left;
}

.template_design2:hover {
    background-position:0 -280px;   
}

Answer 1

您需要在包含背景图片的<a>中添加一个类，以便您可以定位它们。

您使用.template_design:hover，因此要定位第一个（因为它没有类，但您可以使用其ID来测试它是否能够快速运行，然后在{{1}内部分配所有<a>一个类，所以你可以同时将它们全部定位）：

.template_design

这里有一个小提示，展示它是如何运作的：

http://jsfiddle.net/v6aNY/

因此，一旦你知道它正在工作，你就可以分配一个类，这样更像是：

.template_design:hover a#zapzonePoster { opacity: 0.5; }

...它将针对所有这些，所以你只需要一个规则来管理它，而不是很多。

这里使用.template_design:hover a.thumbnail { opacity: 0.5; }类

更新了相同的小提琴

http://jsfiddle.net/v6aNY/1/

将鼠标悬停在图片上方，仅使背景变暗

1 个答案: