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();
   });
})

Answer 2

你也可以用CSS做这件事（虽然在IE中有问题，因为它有问题：将鼠标悬停在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可见性状态更安全。

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

3 个答案: