jquery - jquery 中的 addClass() removeClass() 问题

Question

friend 们好，这是我的代码

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

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