Selecting siblings on hover

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.

Answers


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:


Need Your Help

Vim - show diff on commit in mercurial;

vim mercurial diff hook commit

In my .hgrc I can provide an editor or a command to launch an editor with options on commit.

Convert an image to XAML?

wpf silverlight xaml expression-blend

Does anyone know of any way to convert a simple gif to xaml? E.G. A tool that would look at an image and create elipses, rectangles and paths based upon a gif / jpg / bitmap?

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.