列表Hover问题

Question

我已经问过这个问题了，但我想我没有很好地解释这个问题。所以我们再来一次

​

我有一份名单。默认背景颜色，如上面的图片所示。我想使项目4背景更改为颜色#EDEDED时，悬停。只有第四项，第三项，第二项应保留原色。

我该怎么做？我的问题是，当我悬停在第4项时，所有父项目的背景色也会改变为#EDEDED。欢迎任何JQuery或CSS解决方案。

下面是上面列表的代码：

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

Answer 1

给你：

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

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

Answer 2

绑定针对注释的悬停事件-ul li，添加一个延迟，以便如果意图是item4，其他项不会显示背景。您可以尝试使用http://cherne.net/brian/resources/jquery.hoverIntent.html插件。