将鼠标悬停在图像上，仅使背景变暗答案

【问题标题】：Hover over image, darken background only将鼠标悬停在图像上，仅使背景变暗
【发布时间】：2014-06-22 11:13:07
【问题描述】：

我希望能够将鼠标悬停在图像上，并且只有背景本身变黑（不透明度来控制多少）。当图像悬停时，我已经对图像本身产生了效果，但我想添加一个效果，让白色的背景变成更深的颜色。以后能够通过不透明度和过渡来操作它是最好的，但到目前为止，我还没有找到适用于此的 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;   
}

【问题讨论】：

你能把你的代码放到jsFiddle吗？上传您的图片或在某处找到一些示例图片，说明与您的图片相同的原则（透明度等）
juliancelaj.com/designlayout.html 我不知道如何自己上传图片，但这里以我的网站链接为例。基本上，当它越过矩形模板并变亮时，我希望背景（全白）变暗。

标签： javascript jquery html css

【解决方案1】：

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

你使用.template_design:hover，所以要定位第一个（因为它没有类，但你可以使用它的ID来测试它是否可以快速运行，然后将.template_design中的所有<a>s分配给一个类，这样你就可以同时瞄准它们）：

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

这是一个展示它是如何工作的小提琴：

http://jsfiddle.net/v6aNY/

因此，一旦您知道这是有效的，您就可以分配一个类，使其更像：

.template_design:hover a.thumbnail { opacity: 0.5; }

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

这是用 .thumbnail 类更新的同一个小提琴：

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

【讨论】：