Selecting Siblings On Hover

I have a code that goes like this on HTML:

• Nov

• Solution 1:

  Why not simply use CSS?

  ul.calendar:hover ~ .entry_info {
      // selects all .entry_info's which are on the same level (siblings) as the ul.calender  which is hovered over
  }
  

  BTW I'm sure that jQuery's magic $-function also supports the general sibling combinator, so $("item ~ sibling") should work just fine:

  $("...").hover(function() {
      $("... ~ siblings");
  }
  

  See:

  • http://www.w3.org/TR/selectors/#sibling-combinators (selectors CSS 3)
  • http://api.jquery.com/category/selectors/ (selectors CSS 1 - 3 are supported)
  
  

  Solution 2:

  It does not work because nextAll gets all siblings based on the selector. Your hyperlink is not a sibling. Instead you can use find to search entry_info for the link.

  http://jsfiddle.net/U7hNS/

  <ul class="calendar">
      <li><a href="#">Nov</a></li>
      <li><a href="#">25</a></li>
  </ul>
  <div class="entry_info">
     <p><a href="#" class="read_more">Leer mas</a></p> <!-- NOT A SIBLING! -->
  </div>
  

   

  $('ul.calendar').hover (
      function () {    
          $(this).nextAll('.entry_info').addClass('hover_border');
          $(this).nextAll('.entry_info').find('a.read_more').addClass('more_jquery');
          $(this).next('ul.commentaries').addClass('bubble_hover');        
      },
  
      function () {    
          $(this).nextAll('div.entry_info').removeClass('hover_border');
          $(this).nextAll('.entry_info').find('a.read_more').removeClass('more_jquery');
          $(this).next('ul.commentaries').removeClass('bubble_hover');
  });
  

  
  

Share