当我将鼠标悬停在父母身上时,如何切换孩子？

Question

这是一些示例HTML

<style> .icon {display:none;} </style>
<ul>
    <li>ABC <i id="abc" class="icon">x</i></li>
    <li>DEF <i id="def" class="icon">x</i></li>
    <li>GHI <i id="ghi" class="icon">x</i></li>
</ul>

.icon当我将鼠标悬停在其父级上时,我需要显示li.

这是我正在尝试的:

$('.icon').each().parent().hover(function() {
    $(this).children('.icon').toggle();
});

你能为我指出正确的方向吗？

Answer 1

没有必要使用each方法,您可以使用$(selector, context),尝试以下方法:

$(document).ready(function() {
   $('ul li').hover(function() {
        $('.icon', this).toggle();
   });
})