javascript - 暂时禁用来自 javascript 的特定 css 样式

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设置为display: none时，你可以在li中添加一个类(例如class-name)并在css中添加:not(class-name)。请参阅下面的示例以供引用

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

P.S:我想知道当你将它设置为显示时，那个小矩形是如何可见的:无。 display 设置为 none 肯定漏掉了一部分