Question

$('body').on({
    mouseenter: function () {

        $(this).siblings('span').show();
    },
    mouseleave: function () {

        $(this).siblings('span').show().hide();
    }
}, "div");

我把我的html放在这个

<div></div>
<span>x</span>

当我将鼠标悬停在跨度上时，如果没有将作为子项的跨度移动到DOM中的框中，如何解决这个问题？

Answer 1

那是因为您没有正确附加事件：

$('body div').hover(function(){//mouseover event
  $(this).next().show();
},function(){//mouseleave event
  $(this).next().hide();
});

您还可以缩小代码以在悬停时使用.toggle()：

$('body').on('hover','div',function(){
  $(this).next().toggle();
});

Answer 2

因为你想将事件绑定到span：

$('body').on("hover", "span", function(){
  $(this).show();
},function(){
  $(this).hide();
});

你甚至可以使用mouseenter和mouseleave：

 $('body').on("mouseenter","span", function(){
      $(this).show();
    }).on("mouseleave", "span",function(){
      $(this).hide();
    });

mouseover jquery on sibling elements flick

2 个答案: