Hover siblings selection
I have some code that looks like 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 this when hovering over a UL (with class calendar and comments), border color for div.entry_info and background a.read_more change via jQuery. This is what I have, but the second is not 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 problem is that everything except the second line works.
This is the line with the problem:
$(this).nextAll('a.read_more').addClass('more_jquery');
I am new to jQuery and tried siblings and then all, but it doesn't work. I've tried working with eq (0), but how do I do it? The reason I go with classes and not id is because it is a field that is repeated multiple times.
Thank you for your help.
source to share
Why not just use CSS?
ul.calendar:hover ~ .entry_info {
// selects all .entry_info which are on the same level (siblings) as the ul.calender which is hovered over
}
BTW I'm pretty sure the jQuery magic $ -function also supports the generic combination combinator, so it $("item ~ sibling")
should work fine:
$("...").hover(function() {
$("... ~ siblings");
}
Cm:
- http://www.w3.org/TR/selectors/#sibling-combinators (CSS 3 selectors)
- http://api.jquery.com/category/selectors/ (CSS selectors 1 - 3 are supported)
source to share
This doesn't work because it nextAll
gets all siblings based on the selector. Your hyperlink is not a sibling. Instead, you can use find
entry_info to search for a link.
<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');
});
source to share