jquery - 使用 jquery 定位特定元素

Question

我想制作一个 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();
});