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。）

任何人都有任何想法可能会出错，可以（这）。找不到在div结构上搜索等级？

由于

Answer 1

catlink和shareimage都是shares不是后代的兄弟姐妹，因此.find()将无法找到它们

＆＃13;

$(".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');
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

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并显示 homenetworks

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

Jquery div选择？在悬停时

3 个答案: