Jquery div selection? On hover

Question

I'm having some issues with selecting external div to change the css element.

I had:

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

Which worked to the desired effect, however it applied it to every instance of this on the page. I then found out about $(this).find to only effect the selected one.

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

However this removes the class from .homenetworks and adds the class hidden to .totalshares but it no longer effects .totalshares and .catlink.

The structure of the divs is like so:

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

I would like when a user hovers over .totalshares it hides totalshares,shareimage,newsbutton and then shows homenetworks. (By using display:none under the css class .hidden).

Anyone got any ideas what is possibly going wrong, can (this).find not search up levels on div structure?

Thanks

Answer 1

Add your first code and then specify height and width for .shares,It will hide all other divs and show homenetworks

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

Answer 2

Both catlink and shareimage are siblings of shares not descendants so .find() will not be able to find them

$(".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 3

You dont need to use CSS in this instance, instead you could simply use the hide() method within JQuery and reference each class in your selector.

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

Unless you require css logic specifically this will work for you