當另一個元素動態應用類時，更改元素的樣式

Question

我有一個翻轉菜單，它在hover上有一個應用於<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更改。 請查看此問題中提供的代碼，因為它顯示了如何使用MutationObserver來檢測類更改。 上面鏈接的MDN文檔也提供了一個更一般的例子。