在悬停时选择兄弟姐妹答案

【问题标题】：Selecting siblings on hover在悬停时选择兄弟姐妹
【发布时间】：2012-02-17 00:24:01
【问题描述】：

我在 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 上悬停时实现这一点（带有类日历和评论），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 还很陌生，并且尝试过兄弟姐妹和下一个，但它不起作用。我尝试使用 eq(0) ，但我如何循环它？我选择类而不是 ID 的原因是因为这是一个重复多次的框。

感谢您的帮助。

【问题讨论】：

你是否真的在你正在添加/删除的类中设置了css规则

标签： javascript jquery html css jquery-selectors

【解决方案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）

【讨论】：

它使用纯 CSS 来解决问题。然后，我将与 ~ 兄弟姐妹一起构建一个 jQuery 后备。非常感谢！！！
这看起来很酷，但我无法让它在 Chrome 15 中运行。你能告诉我我做错了什么吗？ jsfiddle.net/U7hNS/1
你犯了和我一样的错误。当我将课程设置为 calendAr 时，@scravy 输入了 calendEr。我不知道哪个是正确的英语，它不是我的第一语言，但我尝试 :) 我想我为你编辑了小提琴。我对 Fiddles 和 Stackoverflow 有点陌生。非常感谢！

【解决方案2】：

它不起作用，因为nextAll 根据选择器获取所有同级。您的超链接不是兄弟。相反，您可以使用 find 在 entry_info 中搜索链接。

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

【讨论】：