javascript - 当我将鼠标悬停在父级上时，如何切换子级？

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当我将鼠标悬停在其 parent上时，我需要显示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();
   });
})

Answer 2

您也可以使用 CSS 执行此操作（尽管在 IE 中存在问题，因为 :hover 在 A 以外的标签上存在问题）：

<style> 
.icon {display:none;} 
li:hover .icon {display:inline;}
</style>

Answer 3

我假设您只想在悬停时显示图标：

$('li').hover(

  // called on mouseenter
  function () {
    $(this).find('.icon').show();
  },

  // called on mouseleave
  function () {
    $(this).find('.icon').hide();
  }
);

这种方法比简单toggle的可见性状态更节省，以防事件丢失。