我正在尝试添加一个框阴影 a:hover 到 Facebook 图标图像。 我认为这很容易,但像往常一样我错了。 我在 WordPress 中使用了一个儿童主题,因为我几个月前才开始使用,并认为这是一个简单的开始方法。我认为这可能是导致问题的原因,但后来我发现 JSFiddle 并且无法在那里添加盒子阴影。
来自 JSFiddle 的代码:
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);
}
任何建议将不胜感激。干杯伙计们!
看到您正在将
box-shadow
应用到锚点上。但是当有人将鼠标悬停在 img
上时,您需要将其应用于 a
。所以,你的代码应该是这样的 -
.icon a:hover img {
box-shadow: 5px 5px 5px rgba(0, 255, 0, 0.1);
}
我已经修好了你的小提琴。
我删除了
:无!重要;
这会阻止进行更改,因为您包含了覆盖所有内容的
!important
。
我将
.icon a:hover
更改为 .icon:hover
'
哦,最后一件事,您可能想要更改
rgba(0,255,0,0.1)
0.1
非常低,可能不可见。
我改变它只是为了让你看到差异
滤镜:阴影(0 0 0.75rem 黑色);