javascript - 在悬停时选择 sibling

Question

我有一段代码在 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 -->

我想在 UL 上悬停时实现这一点(带有类(class)日历和评论)，div.entry_info 的边框颜色和 a.read_more 的背景通过 jQuery 更改。这就是我所拥有的，但是第二个不起作用。

<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>

我目前的问题是，除了第二行以外的所有内容都有效。

这是有问题的行:

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

我是 jQuery 的新手，尝试过 siblings 和 next 等等，但都行不通。我尝试使用有效的 eq(0) 但我如何循环它？我选择类而不是 ID 的原因是因为这是一个重复多次的框。

谢谢你的帮助。

Answer 1

为什么不直接使用 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
}

顺便说一句，我确信 jQuery 的神奇 $-function 也支持通用兄弟组合器，所以 $("item ~ sibling") 应该可以正常工作:

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

参见:

• http://www.w3.org/TR/selectors/#sibling-combinators (选择器 CSS 3)
• http://api.jquery.com/category/selectors/ (支持选择器 CSS 1 - 3)