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>

注意:为了便于阅读，我删除了重复的 span 和 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;
}