0

我有以下标记，并且正在做一些 jQuery 鼠标悬停，并将设置背景颜色。如果类是 .list_spacer，我还想设置相邻类的背景颜色

我目前有：

<div class='lists_items'>
<div class='list_item'>info here</div>
<div class='list_spacer'></div>
<div class='list_item'>info here</div>
<div class='list_spacer'></div>
<div class='list_item'>info here</div>
<div class='list_spacer'></div>
<div class='list_item'>info here</div>
</div>

$('.list_item').on('mouseover',function(){
  $(this).css('background-color','yellow'); // <- yeah, the simplest possible scenario
});

并且我认为必须有某种方法可以访问相邻的 div 并仅设置某个类但不知道如何设置。关于如何做到这一点的任何想法？我只想选择是否立即在之前或之后并且具有 list_spacer 类

提前谢谢

4

3 回答 3

1

您可以访问相邻标签的用户.prev和方法。.next

例子：

$('.list_item').on('mouseover',function(){
  $(this).prev().css('background-color','yellow');
});

要访问某个类，请使用：

$('.list_item').on('mouseover',function(){
  $(this).prev('.list_spacer').css('background-color','yellow');
});

您还可以访问父标签：

<div class='list_item'>
     <div class='list_spacer'></div>
</div>

$('.list_spacer').parent().css('background-color','yellow');
于 2012-11-21T06:26:35.143 回答
1

尝试使用.next('.list_spacer')或.prev('.list_spacer')

$('.list_item').on('mouseover',function(){
   var $this = $(this);

    var $div = $this.prev('.list_spacer').length ? $this.prev('.list_spacer')
                                                 : $this.next('.list_spacer') ;

    $div.css('background-color','yellow'); // 
});

检查小提琴

于 2012-11-21T06:32:50.623 回答
1

使用边框代替背景颜色，因为列表没有内容和宽度，因此不会反映背景颜色。

$(function(){ $('.list_item').on('mouseover',function(){

$(this).css('background-color','yellow'); 

$(this).next('.list_spacer').css('border','1px solid green');

});
});
于 2012-11-21T06:57:26.940 回答