本站消息

站长简介/公众号


站长简介:高级工程师,爱好交友,无偿辅导python和前端,技术交流,面试指导,找工作指导,瞎聊都可加我微信i88811i哈,欢迎欢迎!也欢迎加入程序员交流群,专属程序员的圈子,加我微信拉你进群.欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

灰色框出现在不透明度的图像链接上

发布于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/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

12 0
收藏该文
已收藏

评论内容:(最多支持255个字符)