在悬停时禁用蜂鸣检测元素

Question

我有一个简单的按钮元素，然后紧接着是一个徽章，我将徽章放置在按钮顶部，位置绝对。通常，当您从引导程序中悬停在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>

Answer 1

只需将悬停效果赋予父元素，这样它内部的任何内容都会受到属性的影响。在这种情况下，标签是父标签。给它一个类，然后给它悬停伪元素。像这样：

<a class='parent-btn'>your button and badge </a>

然后在您的CSS中输入以下内容：

.parent-btn:hover { 
    filter: brightness(1.2) 
}