hover - 添加一个 :hover box-shadow to a picture link

Question

我正在尝试将框阴影 a:hover 添加到 facebook 图标图像。我认为这很容易，但像往常一样我错了。我在 wordpress 中使用了一个 child 主题，因为我几个月前才开始使用，我认为这将是一个简单的开始方式。我认为这可能是导致问题的原因，但后来我发现 JSFiddle 并且无法在那里添加框阴影。

来自 JSFiddle 的代码:

http://jsfiddle.net/6P2sB/

HTML

示例 1

<a href="..." target="_blank">
<img class="icon" src="..." alt="facebook icon" align="right" />
</a>

示例 2

<div class="icon">
<a href="..." target="_blank"><img src="..." alt="facebook icon" align="right" />
</a></div>

CSS

.icon {
text-align: right;
box-shadow: none ! important;
border-radius: 7px;
margin-left: 5px;
margin-top: -5px;
margin-right: 10px;
height: 45px;
width: 45px;
}

.icon a:hover {
border-radius: 7px;
box-shadow: 5px 5px 5px rgba(0, 255, 0, 0.1);
}

如有任何建议，我们将不胜感激。伙计们干杯!

链接也可以在http://www.a2zenyoga.com/events/#link 看到

Answer 1

您正在 anchor 上应用 box-shadow。但是当有人将鼠标悬停在 a 上时，您需要在 img 上应用它。所以，你的代码应该是这样的 -

.icon a:hover img {
    box-shadow: 5px 5px 5px rgba(0, 255, 0, 0.1);
}