当所有父母都有同一个班级时，如何在jQuery悬停时选择当前项目？

Question

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

当我将鼠标悬停在专辑封面上时，我希望子div通过过渡不透明度出现。当使用无序列表执行此操作时，我发现悬停伪类会自动选择正确的子级，但是我使用的jQuery的行为却有所不同，并选择具有相同CSS类的所有项，而不仅仅是该项的子级我盘旋了。

有没有一种方法可以使我所悬停的div和它的孩子（而不是所有孩子）受到影响？

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>