javascript - mouseleave() 不删除类

Question

我的 jQuery 代码有问题。当我在蓝色按钮 (icon_disabled) 上鼠标输入时，我想向其添加类 icons-visible，它显示其白色背景，我想显示 disabled_list(图片上的红色 p)。当我离开红色 disabled_list 我想再次 display: none 并删除我之前添加的类。控制台日志工作正常，但我无法删除类和 display: none 红色 p。为什么？ :(

var icon_disabled = document.querySelector("#block-plywajaceikony p:nth-child(2)");
var disabled_list = document.querySelector("#block-plywajaceikony p:nth-child(5)");

        $(icon_disabled).mouseenter(function() {
            $(this).addClass("icons-visible");
            $(disabled_list).css("display","block");
        });

        $(disabled_list).mouseleave(function() {
            $(icon_disabled).removeClass("icons-visible");
            $(this).css("display","none");
            console.log("testing");
        });

HTML:

<div id="block-plywajaceikony">
  <p>...</p>
  <p>...</p> //here I add and trying to remove class "icons-visible"
  <p>...</p>
  <p>...</p>
  <p>...</p> //here is my red p with icons
</div>

Answer 1

在 Firefox 中对我来说工作正常:https://jsfiddle.net/6zbnseL3/4/

var icon_disabled = document.querySelector("#block-plywajaceikony p:nth-child(2)");
var disabled_list = document.querySelector("#block-plywajaceikony p:nth-child(5)");

$(icon_disabled).mouseenter(function() {
        $(this).addClass("icons-visible");
        $(disabled_list).css("display","block");
    });

$(disabled_list).mouseleave(function() {
        $(icon_disabled).removeClass("icons-visible");
        $(this).css("display","none");
        console.log("testing");
    });

但是，我认为您应该采用另一个交互概念。将鼠标悬停在一个元素上并通过将鼠标悬停在另一个元素上将其删除是非常不直观的。最好使用用户已知的交互元素。例如一个开关:点击按钮 -> 按钮改变颜色(按下状态) -> 内容出现 -> 再次点击按钮停用。 (可以使用复选框完成)。