html - 在悬停时禁用蜂检测元素

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 标签是父标签。给它一个类，然后是悬停伪元素。就像是：

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

然后在你的CSS中类似：

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