jquery - jqueryで特定の要素をターゲットにする

Question

リンクの1つにカーソルを合わせると表示される内容を表示するjquery nav-bar を作成したいと思います。

html:

<nav>
    <ul>
        <li><a href="#"><span>Link 1</span></a></li>
        <li><a href="#"><span>Link 2</span></a></li>
        <li><a href="#"><span>Link 3</span></a></li>
        <li><a href="#"><span>Link 4</span></a></li>
    </ul>
</nav>

jquery:

  $(document).ready(function  () {
   $('a span').hide();
       $('li a').hover(
         function(){
           //the right span should show
        },
         function(){
           // the same span should hide
        }
    );
 });

したがって、最初のアイテムがホバーされている場合は、最初のスパンを取得したいと考えています。多くの関数を作成するための解決策を考えましたが、それはあまり役に立ちません。そうです、私はjquery初心者です。

Answer 1

それは次のように簡単に思えるでしょう：

$('li a').on('mouseenter mouseleave', function(e){
    $(this).find('span').toggle(e.type == 'mouseenter');
});

Answer 2

スパンを非表示にしているため、アンカーでイベントをトリガーすることはできません。したがって、アンカーの内部には何もありません。ハンドラーをli要素にバインドできます。

 $('li').hover(
      function(){
        $(this).find('span').show();
     },
      function(){
        $(this).find('span').hide();
     }
 );

Answer 3

現在の要素を参照するには、$(this) を使用する必要があります。以下を参照してください。

$('li a').hover(
    function () {
      $(this).find('span').show()
    },
    function () {
      $(this).find('span').hide()
    }
  );
});

Answer 4

これにカーソルを合わせると色が表示されます。jsfiddleを試す

$('li a').mouseenter(
     function(){
    $(this).show().css({'background' : 'red'});
}).mouseout(function(){
$(this).css({'background' : ''});
});

Answer 5

簡単なコードは次のとおりです。

$('li').hover(function () {
    $(this).find('span').toggle();
});