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>

我很困惑如何解决我的问题实际上当mouseenter() <li>背景颜色会发生变化时，我想要一个简单的效果..但是当我使用嵌套列表时它不能正常工作。我想当用户悬停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;
}

Live example | source

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 <li> <ul>正下方的sitemap元素匹配。使用.find()函数来匹配该元素中的所有<li>元素，无论它们处于哪个级别的DOM。

那就是说，如果你有权访问HTML，我不确定你为什么要使用jQuery来添加这个类。

Answer 5

只需更改

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

到

$('#sitemap li')

因为children()正在寻找#sitemap列表的立即子项（而不是针对子嵌套列表项）

Answer 6

这应该会让你开始，虽然我觉得我有点笨拙但是我不得不关掉所有孩子'ul li'：

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

jquery中的addClass（）removeClass（）问题

6 个答案: