灰色框出现在不透明度的图像链接上
发布于2022-04-24 12:03 阅读(1497) 评论(0) 点赞(12) 收藏(2)
关于 Stack Overflow 的第一个问题，所以如果我遗漏了您需要的任何内容，请询问，我会尽力提供。
基本上，我有一组充当网站链接的图像，当您将鼠标悬停在它们上面时，会产生不透明效果（达到 0.7）。这很好，但是当您悬停并且中间出现灰色框中的不透明度时，我假设这是因为它是带有锚标记的链接。
我的问题是如何摆脱那个灰盒子？有关图像和代码，请参见下文：
图像的 HTML
<div class="col-md-4 centered paddedBottom">
<p class="uppercase">Angela Macaulay Therapies</p>
<a href="http://angelamacaulaytherapies.uk" target="_blank">
<img src="images/angelamacaulaytherapies.png" /></a>
</div>
这是用于图像的 css
#our_work img {
width:400px;
height:400px;
display: inline-block;
height: auto;
max-width: 100%;
}
悬停在图像上的 CSS
#our_work img:hover {
opacity: 0.7;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
悬停前的图像 - http://i.stack.imgur.com/Yqx8N.png
带有悬停和灰色框的图像 - http://i.stack.imgur.com/VNDjD.png
还有什么需要帮助的告诉我！
解决方案
因此，根据我上面对 Webber 的评论，我发现（对我而言）造成这种情况的原因是因为在更改导航栏悬停效果的颜色时，我还针对所有锚标签。这通常不明显，但随着不透明效果，这变得可见。我将代码更改为以下内容：
从：
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, a:hover {
background-color:grey !important;
}
到：
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, #main_nav a:hover {
background-color:grey !important;
}
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/344393/c29804ab717dedecddd6/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力