Jquery div selection? On hover

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上时，它会隐藏总份额，共享图像，新闻按钮，然后显示家庭网络。（通过使用 display：none 在 css 类 .hidden 下）。

任何人都有任何想法可能出现什么问题，可以（这个）.找到不搜索div 结构的级别吗？

谢谢

Answer 1

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>

Answer 2

在这种情况下，

你不需要使用 CSS，相反，你可以简单地在 JQuery 中使用 hide（） 方法，并在选择器中引用每个类。

$(".shares").hover(function(){
    $('.homenetworks').show();
    $('.totalshares, .catlink, .shareimag').hide();
},function(){
    $('.homenetworks').hide();
    $('.totalshares, .catlink, .shareimag').show();
});

除非您特别需要 css 逻辑，否则这将为您工作

Answer 3

添加你的第一个代码然后为 .shares 指定高度和宽度，它会隐藏所有其他div 并显示家庭网络

<style>
.shares{
    width:100px;
    height:100px;
}
</style>