javascript - jQuery div选择？悬停时

选择外部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，然后显示家庭网络。 （通过在CSS类.hidden下使用display：none）。

任何人都有任何想法可能会出问题，（this）.find无法在div结构上搜索级别吗？

谢谢

最佳答案

catlink和shareimage都是shares的兄弟姐妹，不是后代，因此.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>