Временно отключить определенный стиль CSS из JavaScript

Question

У меня есть конкретный вопрос, что есть много статей в Интернете, но они не отвечают на мой вопрос.

У меня есть строка меню на моем веб-сайте, где некоторые элементы <li> появляются, когда пользователь вошел в систему. в. Этот элемент <li> также имеет раскрывающийся список в стиле css со следующим:

ul li:hover > ul {
    display: block;
}

Так что же происходит, когда элемент <li> основного (который имеет прямой потомок <ul>) завис, появится выпадающий список. Довольно просто.

Моя проблема в том, что когда я скрываю этот конкретный элемент <li> с прикрепленным к нему раскрывающимся списком (через следующий код в выражении javascript if), стиль наведения остается.

Таким образом, даже если родительский элемент <li> установлен на display: none;, раскрывающийся список дочерних элементов может быть обнаружен при наведении курсора на крошечный невидимый прямоугольник (см. Рисунок) в заголовке.

TLDR: есть ли способ временно отключить этот конкретный стиль :hover предпочтительно через javascript или jQuery?

Заранее спасибо за помощь.

Мой HTML-код для всех, кто интересуется: (Я удалил ненужные вещи, чтобы было легче понять, что я имею в виду)

<ul>
    <li>Foo</li>
    <li id="dropdown">
        <p class="drop" id="loggedInValue"></p>
        <ul class="dropdown-content">
            <li><a href="account.php">My Account</a></li>
            <li><a href="login.php?logout=true">Logout</a></li>
        </ul>
    </li>
</ul>

Answer 1

Когда вы устанавливаете li для отображения: none, вы можете добавить класс в li (например, имя-класса) и добавить: not (имя-класса) в css. Ниже приведен пример для справки

ul li:not(.class-name):hover > ul {
    display: block;
}

PS: Мне интересно, как этот маленький прямоугольник вообще виден, когда вы установили его для отображения: нет. Определенно, какая-то часть не указана при установке дисплея на none

Answer 2

Вы можете добавить класс logged-in css к корневому элементу html и предсказать селектор при наведении на наличие этого класса.

const onLoginSuccess = () => {
  document.documentElement.classList.add('logged-in');
}

.logged-in ul li:hover > ul {
    display: block;
}

Answer 3

Может быть, вы можете просто полностью удалить элемент из DOM

const dropdown = document.querySelector('#dropdown');
dropdown.parentNode.removeChild(dropdown);

Answer 4

Если не должно быть выпадающего списка, вы должны запустить некоторый код, подобный этому. Пожалуйста, дайте мне знать, если это помогло. Хорошего вам.

const dropdown = document.querySelector('#dropdown');
dropdown.classList.remove('dropdown-styles');