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親にカーソルを合わせたときに表示する必要があり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以外のタグの：hoverに問題があるため、問題があります）。

<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この方法は、イベントが失われた場合の状態を単に表示するよりも節約できます。