Jquery每个都展示它的div

Question

尝试向div添加一些悬停功能，我似乎错过了一些东西。将鼠标悬停在div元素上时，会显示最近的div，其类为.stat。我可以让悬停状态在每个div上工作，但是我无法获得最近的div来悬停或任何div。

由于

代码是：

    $(".stat-button").each(function(i){
$(this).mouseover(function () {
        console.log('hover');
      $(".stat").find(i).show();
}).mouseout(function () {
        $(".stat").find(i).hide();
});
 });

链接到jsfiddle： https://jsfiddle.net/qo1x03q5/

Answer 1

使用jQuery siblings()方法选择.stat，它是正在悬停的.stat-button的兄弟：

$(".stat-button").mouseover(function () {
    console.log('hover');
    $(this).siblings(".stat").show();
}).mouseout(function () {
    $(this).siblings(".stat").hide();
});

JSFiddle Demo

Answer 2

使用Jquery $.siblings获取兄弟元素。

您也可以使用$.hover代替$.mouseover和$.mouseout。

$(".stat-button").hover(function(){
  console.log('hover');
  $(this).siblings(".stat").show();
},
function(){
  $(this).siblings(".stat").hide();
});