Selecting siblings on hover

Question

I have a code that goes like this on HTML:

<div class="blog_highlight">

<ul class="calendar">
<li><a href="#">Nov</a></li>
<li><a href="#">25</a></li>
</ul>


<ul class="commentaries">
<li><a href="#">16</a></li>
</ul>


<div class="entry_info">

<div>
<a href="#"><img src="images/blog_pix_1.jpg" width="230" height="210" alt="" /></a>
</div>
<h2>Title</h2>

<p>Text</p>

<p><a href="#" class="read_more">Leer mas</a></p>

</div><!-- end entry info -->

</div><!-- end blog highlight -->

I would like to achieve that on hover on the UL (with classes calendar and commentaries), the border color for div.entry_info and background of a.read_more changes via jQuery. This is what I have however the second one isn't working.

<script>
$(document).ready(function(){


$('ul.calendar').hover (
function () {

$(this).nextAll('.entry_info').addClass('hover_border');
$(this).nextAll('a.read_more').addClass('more_jquery');
$(this).next('ul.commentaries').addClass('bubble_hover');

},

function () {

$(this).nextAll('div.entry_info').removeClass('hover_border');
$(this).nextAll('a.read_more').removeClass('read_more_jquery');
$(this).next('ul.commentaries').removeClass('bubble_hover');


});



});

</script>

My current issue is that everything except the second line works.

This is the line with the issue:

$(this).nextAll('a.read_more').addClass('more_jquery');

I am fairly new to jQuery and have tried siblings and next and everything but it won't work. I tried with eq(0) which worked but how do I loop it? The reason I go with classes and not ID is because this is a box that gets repeated multiple times.

Thank you for you help.

Answer 1

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');
});

Answer 2

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)