Javascript mouseleave（）不删除类

我的jQuery代码有问题。当我用鼠标点击蓝色按钮（

icon\u disabled

）时，我想向它添加可见的类

图标

，它显示白色背景，我想显示

disabled\u列表

（图片上的红色

p

）。当我离开红色的

disabled_list

时，我想

再次显示：none

并删除我先前添加的类。控制台日志工作正常，但我无法删除类和显示：无红色的

p

。为什么？(

HTML:

…
//我在这里添加并尝试删除类“图标可见”


…
//这是我的带图标的红色p

在Firefox中对我很好：

---

但是，我认为您应该使用另一个交互概念。将鼠标悬停在一个元素上并通过将鼠标悬停在另一个元素上来删除它是非常不直观的。最好使用用户已知的交互元素。例如切换：单击按钮->按钮更改颜色（按下状态）->内容显示->再次单击按钮以停用。（可以使用复选框完成）。

在Firefox中对我来说很好：

但是，我认为您应该使用另一个交互概念。将鼠标悬停在一个元素上并通过将鼠标悬停在另一个元素上来删除它是非常不直观的。最好使用用户已知的交互元素。例如切换：单击按钮->按钮更改颜色（按下状态）->内容显示->再次单击按钮以停用。（可以使用复选框完成）

var icon_disabled=document.querySelector（#block plywajaceikony p:nth child（2）”；
var disabled_list=document.querySelector（#block plywajaceikony p:nth child（5）”；
$（图标被禁用）。鼠标指针（函数（）{
$（此）.addClass（“图标可见”）；
$（禁用列表）.css（“显示”、“块”）；
});
$（已禁用列表）。打开（“鼠标移动”，函数（）{
$（图标被禁用）。removeClass（“图标可见”）；
$（this.css（“显示”、“无”）；
控制台日志（“测试”）；
})；

正文{
颜色：白色；
}
.崩溃{
显示：无；
}
#简易身份证{
背景色：黑色；
填充：20px；
}
p{
背景色：红色；
}
第n个孩子（2）{
背景颜色：蓝色；
}
第n个孩子（5）{
背景颜色：绿色；
}

进入显示



躲藏

var icon_disabled=document.querySelector（#block plywajaceikony p:nth child（2）”；
var disabled_list=document.querySelector（#block plywajaceikony p:nth child（5）”；
$（图标被禁用）。鼠标指针（函数（）{
$（此）.addClass（“图标可见”）；
$（禁用列表）.css（“显示”、“块”）；
});
$（已禁用列表）。打开（“鼠标移动”，函数（）{
$（图标被禁用）。removeClass（“图标可见”）；
$（this.css（“显示”、“无”）；
控制台日志（“测试”）；
})；

正文{
颜色：白色；
}
.崩溃{
显示：无；
}
#简易身份证{
背景色：黑色；
填充：20px；
}
p{
背景色：红色；
}
第n个孩子（2）{
背景颜色：蓝色；
}
第n个孩子（5）{
背景颜色：绿色；
}

进入显示



躲藏

请同时显示您的html。是否确定您的选择器（

\block plywajaceikony p:nth child（5）

）正确？它就像魅力一样工作：您的代码工作正常。它会在离开最后一个孩子时添加类并删除它属性同时显示您的html。是否确定您的选择器（

\block plywaceikony p:nth child（5）

）是吗？它很有魅力：你的代码工作正常。离开最后一个孩子时，它会添加类并删除它属性。请编辑你的问题-顶部似乎有未匹配的代码。还请添加说明，说明你所做的更改以及如何解决问题。请编辑你的问题-似乎有未匹配的代码请在顶部添加一个说明，说明您所做的更改以及如何解决问题。

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");
        });

<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>

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");
    });

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).on('mouseleave',function() {
        $(icon_disabled).removeClass("icons-visible");
        $(this).css("display","none");
        console.log("testing");
    });