Question

我正在尝试添加一个框阴影a：将鼠标悬停在facebook图标图像上。我认为这很容易，但像往常一样，我是不正确的。我在wordpress中使用了一个儿童主题，因为我几个月前刚刚开始，并认为这是一个简单的方法。我认为这可能导致问题，但后来我发现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

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

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

Answer 2

我已经修好了你的小提琴。

我删除了

：没有！重要;

这会阻止进行更改，因为您包含覆盖所有内容的!important。

我将.icon a:hover更改为.icon:hover'

哦，最后一件事，您可能想要更改rgba(0,255,0,0.1)，0.1非常低，可能不会显示。

我改变它只是为了让你看到差异

<强> DEMO

添加：hover box-shadow到图片链接

2 个答案: