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

(this).find only searches in childs of this element. To avoid that use siblings() like Arun P Johny mentioned, or use the .parent() function before you use .find() (this only works in your case, not in all, depending on the strukture and the parent elements.) — Der Vampyr
– Der Vampyr, Commented Nov 18, 2014 at 10:33

Arun P Johny · Accepted Answer · 2014-11-18 10:41:00Z

1

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>

edited Nov 18, 2014 at 10:41

answered Nov 18, 2014 at 10:31

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

George Over a year ago

Wouldn't it make more sense to initially select .newsbutton rather than .shares?

KojoSlayer Over a year ago

Fantastic, I was not aware of .siblings! thank you. .newsbutton will have a url in that needs to be clickable still.

Master Yoda · Accepted Answer · 2014-11-18 10:34:34Z

0

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

answered Nov 18, 2014 at 10:34

Master Yoda

4,42212 gold badges46 silver badges81 bronze badges

2 Comments

Der Vampyr Over a year ago

I prefer the solution by adding a "hidden"-class. .hide() and .show() may be faster and more comfortable, but the code is better to read if there are html classes which tell you about their visibility.

Master Yoda Over a year ago

@DerVampyr Yes but it adds to the complexity of the script and goes against the idea of actually using the JQuery framework when the classes are provided for you to use. "Write less, do more"

nikita · Accepted Answer · 2014-11-18 10:55:34Z

0

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>

answered Nov 18, 2014 at 10:55

nikita

2773 silver badges16 bronze badges

Collectives™ on Stack Overflow

Jquery div selection? On hover

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related