如何解决在悬停时禁用蜂鸣检测元素
我有一个简单的按钮元素,然后紧接着是一个徽章,我将徽章放置在按钮顶部,位置绝对。通常,当您从引导程序中悬停在btn-dark上方时,它会将颜色略微更改为灰色,并且效果很好,但是当我将鼠标悬停在位于按钮顶部的徽章上时,悬停效果会停止工作,因为它会视为悬停按钮之外。无论如何,没有任何JavaScript就能保持悬停效果吗?无论如何,是否会使徽章在悬停时无法被检测到?
<div>
<a href="#">
<i class=" btn btn-dark cart-button fa fa-shopping-cart fa-2x"></i>
<span class="badge badge-pill badge-danger badge-style">
{{cartcounter}}
</span>
</a>
</div>
解决方法
只需将悬停效果赋予父元素,这样它内部的任何内容都会受到属性的影响。在这种情况下,标签是父标签。给它一个类,然后给它悬停伪元素。像这样:
<a class='parent-btn'>your button and badge </a>
然后在您的CSS中输入以下内容:
.parent-btn:hover {
filter: brightness(1.2)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。