Question

我已经问过这个问题，但我认为我不能很好地解释这个问题。所以我们再来一次：

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

我有一份清单。使用默认背景颜色，如上图所示。我希望将第4项背景更改为悬停时的#EDEDED颜色。只有第4项。第3项，第2项应保留原始背景颜色。

我该怎么做？我的问题是当我将鼠标悬停在第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

为＃comments-ul li绑定悬停事件，添加延迟，以便在意图为item4时其他项目不显示背景。您可以尝试使用http://cherne.net/brian/resources/jquery.hoverIntent.html插件

列出悬停问题

2 个答案: