Изменить стиль элемента, когда другой элемент имеет класс, динамически примененный

Question

У меня есть опрокидывающееся меню с классом, примененным к <li> элементам при наведении, что переключает видимость div внутри него.

Этот класс называется "cbp-hropen" и применяется, когда <li> находится при наведении.

Я хотел бы активировать видимость другого совершенно отдельного элемента, называемого "menuDimmer", когда этот класс применяется к <li>.

<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

Вы можете использовать MutationObserverAPI прослушивать изменения DOM для указанных элементов. Взгляните на предоставленный код в этом вопросе , поскольку он показывает, как использовать MutationObserver для обнаружения изменений класса. Приведенный выше документ MDN также предоставляет более общий пример.

Answer 2

Вы можете использовать событие для добавления класса:

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

, затем вы удаляете класс вашего div

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