当所有父母拥有相同的班级时，如何使用jQuery在悬停时选择当前项目？

Question

我已经构建了一个jsFiddle，它重现了我在Wordpress网站上使用页面构建器插件构建的布局的问题。共有五列，所有列都包含具有相同CSS类的相册封面。

当我将鼠标悬停在专辑封面上时，我希望通过转换不透明度来显示子div。使用无序列表执行此操作时，我发现悬停伪类会自动选择正确的子类，但是我使用的jQuery表现不同并选择具有相同CSS类的所有项而不仅仅是我徘徊的物品的孩子。

有没有办法让它能够影响我徘徊在它的孩子身上，而不是所有孩子？

https://jsfiddle.net/25pftxv3/

<div class="column">
    <div class="album-cover">
        <div class="album-cover-icon"></div>
    </div>
</div>

<div class="column">
    <div class="album-cover">
        <div class="album-cover-icon"></div>
    </div>
</div>

<div class="column">
    <div class="album-cover">
        <div class="album-cover-icon"></div>
    </div>
</div>

<div class="column">
    <div class="album-cover">
        <div class="album-cover-icon"></div>
    </div>
</div>

<div class="column">
    <div class="album-cover">
        <div class="album-cover-icon"></div>
    </div>
</div>



html,
body {
  height:100%;
}

.column {
  position:relative;
  float:left;
  width:18%;
  height:100%;
  margin:1%;
  overflow:hidden;
}

.album-cover {
  padding:60px 0 !important;
  background:pink;
}

.album-cover-icon {
  width:20px;
  height:20px;
  margin:0 auto;
  background:yellow;
  opacity:0;
  transition: all .5s;
}

.album-cover-icon.hover {
  opacity:1;
}


jQuery(document).ready(function($) {    

$(".album-cover").hover(function() {
    $(".album-cover-icon").addClass("hover");
}, function() {
    $(".album-cover-icon").removeClass("hover");
});

});

Answer 1

.album-cover-icon将定位所有.album-cover-icon元素。

您希望使用$(this).find('.album-cover-icon')定位当前悬停元素中的.album-cover-icon。

jQuery(document).ready(function($) {	

$(".album-cover").hover(function() {
    $(this).find(".album-cover-icon").addClass("hover");
}, function() {
    $(this).find(".album-cover-icon").removeClass("hover");
});

});

html,
body {
  height:100%;
}
.column {
  position:relative;
  float:left;
  width:18%;
  height:100%;
  margin:1%;
  overflow:hidden;
}

.album-cover {
  padding:60px 0 !important;
  background:pink;
}

.album-cover-icon {
  width:20px;
  height:20px;
  margin:0 auto;
  background:yellow;
  opacity:0;
  transition: all .5s;
}

.album-cover-icon.hover {
  opacity:1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="column">
  <div class="album-cover">
  <div class="album-cover-icon"></div>
  </div>
</div>

<div class="column">
  <div class="album-cover">
  <div class="album-cover-icon"></div>
  </div>
</div>

<div class="column">
  <div class="album-cover">
  <div class="album-cover-icon"></div>
  </div>
</div>

<div class="column">
  <div class="album-cover">
  <div class="album-cover-icon"></div>
  </div>
</div>

<div class="column">
  <div class="album-cover">
  <div class="album-cover-icon"></div>
  </div>
</div>

但是，不管怎样，你可以在没有JS / jQuery的情况下做到这一点。只需在父级上使用:hover来定位孩子。

html,
body {
  height:100%;
}
.column {
  position:relative;
  float:left;
  width:18%;
  height:100%;
  margin:1%;
  overflow:hidden;
}

.album-cover {
  padding:60px 0 !important;
  background:pink;
}

.album-cover-icon {
  width:20px;
  height:20px;
  margin:0 auto;
  background:yellow;
  opacity:0;
  transition: all .5s;
}

.album-cover:hover .album-cover-icon {
  opacity:1;
}

<div class="column">
  <div class="album-cover">
  <div class="album-cover-icon"></div>
  </div>
</div>

<div class="column">
  <div class="album-cover">
  <div class="album-cover-icon"></div>
  </div>
</div>

<div class="column">
  <div class="album-cover">
  <div class="album-cover-icon"></div>
  </div>
</div>

<div class="column">
  <div class="album-cover">
  <div class="album-cover-icon"></div>
  </div>
</div>

<div class="column">
  <div class="album-cover">
  <div class="album-cover-icon"></div>
  </div>
</div>

Answer 2

只需使用$(this)来引用正在悬停的实际块。然后使用.find()获取它的孩子.album-cover-icon

＆＃13;

＆＃13;

jQuery(document).ready(function($) {

  $(".album-cover").hover(function() {
    $(this).find('.album-cover-icon').addClass("hover");
  }, function() {
    $(this).find('.album-cover-icon').removeClass("hover");
  });

});

＆＃13;

html,
body {
  height: 100%;
}

.column {
  position: relative;
  float: left;
  width: 18%;
  height: 100%;
  margin: 1%;
  overflow: hidden;
}

.album-cover {
  padding: 60px 0 !important;
  background: pink;
}

.album-cover-icon {
  width: 20px;
  height: 20px;
  margin: 0 auto;
  background: yellow;
  opacity: 0;
  transition: all .5s;
}

.album-cover-icon.hover {
  opacity: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="column">
  <div class="album-cover">
    <div class="album-cover-icon"></div>
  </div>
</div>

<div class="column">
  <div class="album-cover">
    <div class="album-cover-icon"></div>
  </div>
</div>

<div class="column">
  <div class="album-cover">
    <div class="album-cover-icon"></div>
  </div>
</div>

<div class="column">
  <div class="album-cover">
    <div class="album-cover-icon"></div>
  </div>
</div>

<div class="column">
  <div class="album-cover">
    <div class="album-cover-icon"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

这方面的缺点是有很多方法。我最喜欢的是使用jquery选择器的context参数：

$( function(){ 
    $(".album-cover").hover(function() {
        $(".album-cover-icon", this).addClass("hover");
    }, function() {
        $(".album-cover-icon", this).removeClass("hover");
    });
});

它只会将选择器与第二个参数的子项匹配（在上例中为this）。

https://jsfiddle.net/u0Lrutrf/