请问怎么用JS实现鼠标经过变换背景和点击停留在这个背景上？

Question

小白只会用CSS去实现。。。我图片用了定位，下面这个是HTML，不知道要怎么用JS去控制实现。。。

    <nav class="cd-main-nav" >
        <ul>
            <!-- 导航-->
            <li><a href="#0" class="home"></a></li>
            <li><a href="#0" class="game-center" ></a></li>
            <li><a href="#0" class="qa"></a></li>
            <li><a href="#0" class="call" ></a></li>
        </ul>
    </nav>

Answer 1

JS 也是要配合 css 的

可以在 :hover 里加背景，这就有没有过的背景了，然后用 JS 处理 click 事件，给这个DOM加个类，比如 hover，然后在 css 里定义 .hover { background: .....}

https://jsfiddle.net/nrystd4z/

关键代码，（CSS 是用 SASS写的，看得懂嘛）

li {
  &:hover {
    background: #ffddcc;
  }
  &.hover {
    background: #ffddcc;
  }
}

$(function() {
    $("li").on("click", function() {
    $(this).siblings().removeClass("hover");
    $(this).addClass("hover");
  })
});