列表悬停问题

我已经问过这个问题，但我认为我不能很好地解释问题。所以在这里，我们又来了：列表悬停问题

http://i54.tinypic.com/1zp4kev.png

我有一个列表。使用上图中显示的默认背景色。我想让第4项背景颜色改变#EDEDED在盘旋时。只有项目4.项目3，项目2应保持原始背景颜色。

我该怎么做？我的问题是，当我将鼠标悬停在项目4上时，所有父项目的背景颜色也都变为#EDEDED。任何JQuery或CSS解决方案，赞赏。

下面是上面列表的代码：对＃评论-UL李

<ul> 
    <li class='comment'> 
     <div class='comment-body'> 
     item 2 
     </div><abbr class='timestamp' title='2011-02-18 11:39:32'>2011-02-18 11:39:32</abbr> 
     <div class='aut'> 
     Anonymous 
     </div><a href='#comment_form' class='reply' id='2' name="2">Reply</a> 
     <ul id='comments-ul'> 
     <li class='comment'> 
      <div class='comment-body'> 
      item 3 
      </div><abbr class='timestamp' title='2011-02-18 11:40:07'>2011-02-18 11:40:07</abbr> 
      <div class='aut'> 
      Anonymous 
      </div><a href='#comment_form' class='reply' id='3' name="3">Reply</a> 
      <ul id='comments-ul'> 
      <li class='comment'> 
       <div class='comment-body'> 
       item 4 
       </div><abbr class='timestamp' title='2011-02-18 11:40:12'>2011-02-18 
       11:40:12</abbr> 
       <div class='aut'> 
       Anonymous 
       </div><a href='#comment_form' class='reply' id='4' name="4">Reply</a> 
      </li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    <li class='comment'> 
     <div class='comment-body'> 
     item 1 
     </div><abbr class='timestamp' title='2011-02-18 11:39:28'>2011-02-18 11:39:28</abbr> 
     <div class='aut'> 
     Anonymous 
     </div><a href='#comment_form' class='reply' id='1' name="1">Reply</a> 
    </li> 
    </ul>

来源

2011-02-18 Hirvesh

是否有可能更嵌套项目（4个以上的深）？也就是说，您只是想让最深层次的项目对悬停状态做出响应？ – 2011-02-18 08:01:07

是的，可以有更多的neste项目，超越第4级。我只希望该级别响应，鼠标悬停在其上，其他一切保持不变... – Hirvesh 2011-02-18 08:03:35

在这里你去：

$('li:not(:has(li))').hover(
    function() { 
     $(this).css({'background': '#EDEDED'}); 
    }, 
    function() { 
     $(this).css({'background': 'none'}); 
    } 
);

演示：http://jsfiddle.net/a6LqJ/

来源

2011-02-18 08:18:18

绑定悬停事件，添加一个延迟，所以，如果意图是ITEM4其他项目不显示背景。你可以尝试使用http://cherne.net/brian/resources/jquery.hoverIntent.html插件

来源

2011-02-18 08:12:10 Sharad

列表悬停问题

回答

相关问题