JQuery:动态列表元素上的鼠标悬停效果
JQuery:动态列表元素上的鼠标悬停效果
提问于 2014-07-16 20:12:16
首先是静态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-element中有两个图标。当您遍历li-element时，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函数？
非常感谢。
回答 4
Stack Overflow用户
发布于 2014-07-16 20:15:15
为什么不直接使用CSS呢？
li .controls {
display:none;
}
li:hover .controls {
display:block;
}Stack Overflow用户
发布于 2014-07-16 20:16:56
您应该更具体地了解.controls div。我不知道结构是什么，但我建议更准确一些。类似于：$(this).closest(".controls")或$(this).parent(".controls")
Stack Overflow用户
发布于 2014-07-16 20:17:02
使用mouseenter而不是mouseover：
$('#droppableZone ol').on('mouseenter', 'li', function () {
$(this).find('.controls').css('visibility', 'visible');
}).on('mouseleave', 'li', function () {
$(this).find('.controls').css('visibility', 'hidden');
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24780493
复制相关文章
相似问题
腾讯云开发者
