Question

我有一个过渡菜单，该菜单具有一个类，该类应用于悬停时的<li>元素，可在其中切换div的可见性。

该类称为“ cbp-hropen”，并且在<li>悬停时应用。

当将此类应用于<li>时，我想触发另一个完全独立的元素“ menuDimmer”的可见性。

<div class="menuDimmer"></div>
<div id="menu" class="main">
<ul>
    <li>
        MENU
        <div class="cbp-hrsub">content...</div>
    </li>
    <li>
        MENU 2
        <div class="cbp-hrsub">content...</div>
    </li>
</ul>

所以我想要类似的东西：

if ($("li").hasClass('cbp-hropen')) {
    $(".menuDimmer").fadeIn(100);
} else {
    $('.menuDimmer').fadeOut(100);
}

（对不起，我知道代码很糟糕，但是只是试图传达信息）

这必须动态地工作，而不是在页面加载时工作，因为触发元素本身仅在悬停时才处于活动状态。

Answer 1

您可以使用事件来添加类：

$('#id').on('mouseover',function(){
//addclass
}

然后您删除div的类

$('#id').on('mouseout',function(){
//removeclass
}

Answer 2

您可以使用MutationObserverAPI 侦听指定元素上的DOM更改。请查看此question中提供的代码，因为它显示了如何使用MutationObserver检测类更改。上面链接的MDN文档也提供了更通用的示例。

当另一个元素具有动态应用的类时，更改元素的样式

2 个答案: