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（带有日历和评论）上实现这一点，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的原因是因为这是一个多次重复的框。

谢谢你的帮助。

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
}

BTW我确信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选择器）

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

在悬停时选择兄弟姐妹

2 个答案: