javascript - Jquery div选择？悬停时

Question

我在选择外部 div 来更改 css 元素时遇到了一些问题。

我有:

<script>
$(".shares").hover(function(){
    $('.homenetworks').removeClass('hidden');
    $('.totalshares').addClass('hidden');
    $('.catlink').addClass('hidden');
    $('.shareimage').addClass('hidden');
},function(){
    $('.homenetworks').addClass('hidden');
    $('.totalshares').removeClass('hidden');
    $('.catlink').removeClass('hidden');
    $('.shareimage').removeClass('hidden');
});

</script>

它达到了预期的效果，但是它将它应用于页面上的每个实例。然后我发现 $(this).find 只影响所选的。

<script>
$(".shares").hover(function(){
    $(this).find('.homenetworks').removeClass('hidden');
    $(this).find('.totalshares').addClass('hidden');
    $(this).find('.catlink').addClass('hidden');
    $(this).find('.shareimage').addClass('hidden');
},function(){
    $(this).find('.homenetworks').addClass('hidden');
    $(this).find('.totalshares').removeClass('hidden');
    $(this).find('.catlink').removeClass('hidden');
    $(this).find('.shareimage').removeClass('hidden');
});

</script>

然而，这会从 .homenetworks 中删除该类并将隐藏的类添加到 .totalshares，但它不再影响 .totalshares 和 .catlink。

div的结构是这样的:

<div class="newsbutton">
   <div class="catlink">
      Link
   </div>
   <div class="shareimage">
      Img
   </div>
   <div class="shares">
      <div class="totalshares">
         Shares
      </div>
      <div class="homenetworks hidden">
         Content
      </div>
   </div>
</div>

我希望当用户将鼠标悬停在 .totalshares 上时，它会隐藏 totalshares、shareimage、newsbutton，然后显示 homenetworks。 (通过在 css 类 .hidden 下使用 display:none)。

任何人都知道可能出了什么问题，可以 (this).find not search up levels on div structure?

谢谢

Answer 1

catlink 和 shareimage 都是 shares 的 sibling 而不是后代，所以 .find() 将无法找到他们

$(".shares").hover(function() {
  $(this).find('.homenetworks').removeClass('hidden');
  $(this).find('.totalshares').addClass('hidden');
  $(this).siblings('.catlink, .shareimage').addClass('hidden');
}, function() {
  $(this).find('.homenetworks').addClass('hidden');
  $(this).find('.totalshares').removeClass('hidden');
  $(this).siblings('.catlink, shareimage').removeClass('hidden');
});

.newsbutton {
  position: relative;
  height: 80px;
}
.hidden {
  display: none !important;
}
.catlink,
.shareimage {
  display: inline-block;
  width: 48%;
  height: 30px;
}

.shares {
  position: absolute;
  top: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="newsbutton">
  <div class="catlink">
    Link
  </div>
  <div class="shareimage">
    Img
  </div>
  <div class="shares">
    <div class="totalshares">
      Shares
    </div>
    <div class="homenetworks hidden">
      Content
    </div>
  </div>
</div>
<div class="newsbutton">
  <div class="catlink">
    Link
  </div>
  <div class="shareimage">
    Img
  </div>
  <div class="shares">
    <div class="totalshares">
      Shares
    </div>
    <div class="homenetworks hidden">
      Content
    </div>
  </div>
</div>
<div class="newsbutton">
  <div class="catlink">
    Link
  </div>
  <div class="shareimage">
    Img
  </div>
  <div class="shares">
    <div class="totalshares">
      Shares
    </div>
    <div class="homenetworks hidden">
      Content
    </div>
  </div>
</div>