jQuery中的addClass（）removeClass（）问题

Question

你好朋友这里我的代码

jQuery的

<script>
    $(document).ready(function(){
        $('#sitemap').children('li').addClass('cl');

        $('.cl').mouseenter(function() {
            $(this).css('background','#eee');
            $(this).siblings('li').css('background','');
            $(this).parents().css('background','');
        })

        $('.cl').mouseout(function() {
            $(this).css('background','');
        })
    })
</script>

HTML

<ul id="sitemap">
    <li>
        one
        <ul>
            <li>two</li>
            <li>two</li>
            <li>two</li>
            <li>two</li>
        </ul>
    </li>
    <li>one</li>
    <li>one</li>
</ul>

我很困惑如何解决我的问题，实际上我想要一个简单的效果，当<li>背景颜色上的mouseenter()改变..但是当我使用嵌套列表时，它不能正常工作。 我想当用户将鼠标悬停在li时背景颜色会改变

请帮我

提前致谢 ：）

Answer 1

您实际上不需要JavaScript，只需使用CSS

  #sitemap li {
  background-color:white;
  }

  #sitemap li:hover {
  background-color:red;
  }

您还可以添加所需的任何其他选择器。

Answer 2

如果您处于标准模式并且不需要支持IE6，则可以仅使用CSS来实现：

.cl:hover {
    background: #eee;
}

无需JavaScript。 不幸的是，IE6只有尊重:hover在a元素。 另请注意，您需要成为标准（而非怪癖）模式才能使其在IE7中正常工作。

---

更新 ：根据下面的评论：

问题是当我使用嵌套列表时，此代码将更改所有嵌套的<li>背景颜色

像你想被凸显不是更具体的东西这听起来我li的话，因为设置顶级li的背景颜色将颜色它和它的子元素（除非他们有一个覆盖颜色，这将是丑陋如果您的第一个项目带有ul ）。 我想我会改变结构：

<ul id="sitemap">
    <li>
        <div>one</div>
        <ul>
            <li><div>two</div></li>
            <li><div>two</div></li>
            <li><div>two</div></li>
            <li><div>two</div></li>
        </ul>
    </li>
    <li><div>one</div></li>
    <li><div>one</div></li>
</ul>

...然后使用此CSS：

#sitemap div:hover {
    background: #eee;
}

现场示例 | 资源

Answer 3

请使用以下代码Update您的jquery

$(function() {
    $("#sitemap").children("li").each(function() {
        $(this).mouseover(function() {
            $(this).css ("background-Color", "#c0c0c0");
        });
        $(this).mouseout(function () {
            $(this).css("background-Color", "#FFF"); 
        });
    });
});​

看到这个Jsfiddle： http : //jsfiddle.net/v4CL5/

希望这对您有帮助

Answer 4

.children()函数仅下降到DOM的下一级，因此您的选择器将仅匹配ID sitemap <ul>正下方的<ul> <li>元素。 改用.find()函数匹配该元素内的所有<li>元素，无论它们位于DOM的哪个级别上。

就是说，我不确定如果可以访问HTML，为什么还要使用jQuery添加类。

Answer 5

只是改变

$('#sitemap').children('li')

成

$('#sitemap li')

由于children()正在寻找#sitemap列表的直接子代（而不是用于子嵌套的列表项）

Answer 6

这应该让您开始，尽管我认为我不得不关闭所有孩子'ul li'有点笨拙：

http://jsfiddle.net/Ashenkase/weHBT/