Jquery each展示其div

Question

尝试为div添加悬停功能，但好像缺少了些东西。当悬停在一个div元素上时，显示最近的class为.stat的div。我可以让每个div的悬停状态工作，但我无法让最近的div悬停，也无法让任何div悬停。

代码如下：

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

Link to jsfiddle: https://jsfiddle.net/qo1x03q5/

- Jolen

Answer 1

使用jQuery的siblings()方法选择被悬停的.stat-button兄弟元素中的.stat元素：

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

JSFiddle演示

- Jacob G

---

完成了！感谢您的帮助，我从未听说过兄弟姐妹 :) - Jolen

没问题:D 很高兴能帮忙 - Jacob G

Answer 2

使用Jquery的$.siblings方法来获取兄弟元素。

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

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

- Lucas Souza