JQuery：鼠标悬停对动态列表元素的影响

Question

首先是静态HTML

<div id="droppableZone">
      <!--Sortable List in the drop zone-->
      <ol class="nested_with_switch vertical"> 
         <li class="">
            <span class="icon-file4 ic-comp-default ic-elem "></span>
            <span comp-type="Webseite">Webseite Name</span>
            <div class="controls">
                 <span class="icon-pen ic-comp-blue"></span>
                 <span class="icon-x ic-comp-red"></span>
            </div>
            <ol></ol>
         </li>
       </ol>
 </div>

拖放后的动态HTML

<ol class="nested_with_switch vertical"> 
    <li class="">
            <span class="icon-file4 ic-comp-default ic-elem "></span>
            <span comp-type="Webseite">Webseite Name</span>
            <div class="controls">
                 <span class="icon-pen ic-comp-blue"></span>
                 <span class="icon-x ic-comp-red"></span>
            </div>
            <ol class="">
               <li class=""> ....
                <ol class="">
                   <li class="">
                     <ol></ol>
                   </li>
                </ol>
               </li>
             </ol>
      </li>
</ol>

注意：为了便于阅读，我删除了重复的跨距和div。

如您所见，左侧有一个有序列表（ol）。您可以从右侧拖动组件并将其放入左侧的有序列表中。网站li-element内部再次出现“有序列表”，因此您可以根据需要删除这么多组件。

然后我有一个隐藏的control-div，在li元素中有两个图标。当你遍历li元素时，control-div将是可见的。这是JQuery代码。

$('#droppableZone ol').on('mouseover', 'li', function () {
    $(this).find('.controls').css('visibility', 'visible');
}).on('mouseleave', 'li', function () {
    $(this).find('.controls').css('visibility', 'hidden');
});

问题是，当我使用单个li元素时，所有control-div都可见。能帮我写一下这个功能的正确JQuery函数吗？

非常感谢。

Answer 1

为什么不简单地使用CSS？

li .controls {
   display:none;
}
li:hover .controls {
   display:block;
}

Answer 2

您应该更加具体地了解.controls div。我不知道结构是什么，但我建议更准确。例如：$(this).closest(".controls")或$(this).parent(".controls")

Answer 3

使用mouseenter而不是mouseover：

$('#droppableZone ol').on('mouseenter', 'li', function () {
    $(this).find('.controls').css('visibility', 'visible');
}).on('mouseleave', 'li', function () {
    $(this).find('.controls').css('visibility', 'hidden');
});

Answer 4

您的问题

1. 我认为隐藏的元素不会触发鼠标悬停事件。

2. 在find中尝试.controls ol将为您提供课程.control的所有div。

<强>解决方案

1. 设置opacity而不是visibility。

2. 此外，请为children选择li，并为那些mouseover绑定li。

所以，你的代码就像：

<强> JS

$('#droppableZone ol li').on('mouseover', function () {
    $(this).children(".controls").css('opacity', '1.0');
}).on('mouseleave', function () {
    $(this).children(".controls").css('opacity', '0.0');
});