mouseleave()不删除类

Question

我的jQuery代码有问题。当我点击蓝色按钮(icon_disabled)时，我想给它添加一个显示白色背景的icons-visible类，我想要显示disabled_list (图片上的红色p )。当我离开红色disabled_list时，我想再次display: none它，并删除我之前添加的类。控制台日志运行良好，但我不能删除类并对红色p执行display: none操作。为什么？

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

我在火狐浏览器中运行得很好：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");
    });

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

Answer 2

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

​

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

body{
  color:white;
  
}

.collapsed{
  display: none;
}

#easy-id{
  background-color: black;
  padding:20px;
}


p{
   background-color:red;
}

p:nth-child(2){
  background-color:blue;
}

p:nth-child(5){
  background-color:green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="block-plywajaceikony">
  <p>...</p>
  <p>Enter to Show</p>
  <p>...</p>
  <p>...</p>
  <p>Leave to Hide</p>
</div>

​