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

Question

Here's some sample 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>

I need to show .icon when I hover over its parent li .

Here's what I'm trying:

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

Can you point me in the right direction?

Answer 1

There is no need to use each method, you can use $(selector, context) , try the following:

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

Answer 2

You can do this with CSS too (although problematic in IE, since it has issues with :hover on tags other than A):

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

Answer 3

I assume you want to show the icon only as long as you hover:

$('li').hover(

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

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

This method is saver than to simply toggle visibility state in case events get lost..