站长简介:高级工程师,爱好交友,无偿辅导python和前端,技术交流,面试指导,找工作指导,瞎聊都可加我微信i88811i哈,欢迎欢迎!也欢迎加入程序员交流群,专属程序员的圈子,加我微信拉你进群.欢迎关注我的微信公众号:程序员总部,程序员的家，探索程序员的人生之路！分享IT最新技术，关注行业最新动向，让你永不落伍。了解同行们的工资，生活工作中的酸甜苦辣，谋求程序员的最终出路!
灰色框出现在不透明度的图像链接上
发布于2022-04-24 12:03 阅读(1095) 评论(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;
}
站长简介:高级工程师,爱好交友,无偿辅导python和前端,技术交流,面试指导,找工作指导,瞎聊都可加我微信i88811i哈,欢迎欢迎!也欢迎加入程序员交流群,专属程序员的圈子,加我微信拉你进群
欢迎关注我的公众号:程序员总部,关注公众号回复前端,免费领取 全套前端视频教程,关注公众号回复前端充值+你的账号,免费为您充值1000积分
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/344393/c29804ab717dedecddd6/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)