使用jquery定位特定元素

Question

我想创建一个jquery导航栏，它会显示当您将鼠标悬停在其中一个链接上时将要查看的内容：

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 noob。

Answer 1

它似乎很简单：

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

Answer 2

您将无法在锚点上触发事件，因为您正在隐藏跨度，因此锚点内部没有任何内容，您可以将处理程序绑定到li元素：< / p>

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