暂时从javascript禁用特定的CSS样式

Question

我有一个特别具体的问题，在线上有很多文章，但它们没有回答我的问题。

我的网站上有一个菜单栏，在用户登录时会出现一些<li>元素。该<li>元素还有一个css样式的悬停下拉菜单，如下所示：

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

那么发生的是，当main的<li>元素（其直接子元素为<ul>）悬停在其上时，将显示下拉列表。非常简单。

我的问题是，当我隐藏带有下拉列表的特定<li>元素时（通过javascript if语句中的以下代码），悬停样式仍然保留。

因此，即使将父<li>设置为display: none;，也可以通过将其悬停在标题中的一个微小的不可见矩形（参见图片）上来显示子下拉列表。

TLDR：，有没有一种方法，我可以优先通过javascript或jQuery暂时禁用特定的:hover样式？

非常感谢您的帮助。

我的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设置为不显示时，可以将一个类添加到li中（例如，类名），然后将：not（class-name）添加到css中。 请参阅下面的示例以供参考

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

P.S：我想知道当您将其设置为显示时，该小矩形怎么会可见：无。将显示设置为无时肯定会遗漏某些部分

Answer 2

您可以将logged-in css类添加到html根元素，并根据该类的存在来确定悬停选择器。

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

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

Answer 3

如果没有下拉列表，则应该运行与此类似的代码。 请告诉我是否有帮助。 有一个好吧。

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

Answer 4

也许您可以完全从DOM中删除该元素

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