Question

我有一个页面，其首页上的菜单背景颜色为XYZ。在任何后续页面（由于导航背景在子页面上更改）页面上，导航背景颜色都会更改，因此我还必须更改导航项目本身的背景颜色。这是一个示例：

.nav__menu {
  ul {
    display: flex;

    li {
      padding: 3px;

      &:hover {
        background-color: rgba(0, 0, 0, 0.3);
      }
    }
  }
}

到目前为止，太好了。该SCSS将为首页设置标准背景色。切换到其他网站后，我选择通过JS动态更改颜色：

$(document).ready(() => {
  const path = window.location.pathname;
  const root_path = path.substring(path.lastIndexOf("/"));

  if (path !== root_path) {
    $(".nav__menu ul li a").css("color", "#0c9594");
    $(".nav__menu ul li").hover(
      e => {
        const el = $(e.target);

        if (el[0].nodeName == "LI") {
          $(el).css("background-color", "rgba(0, 0, 0, 0.1)");
        }
      },
      e => {
        const el = $(e.target);
        if (el[0].nodeName == "LI") {
          $(el).css("background-color", "transparent");
        }
      }
    );
  } else {
    $(".nav__menu ul li a").css("color", "#f9f6ef");
  }

在jQuery hover方法中，我必须指定e.target，因为this是指窗口对象。另外，由于LI内有一个定位标记，因此我必须使用[0]检查CSS是否已应用于正确的元素。

此行为极其错误，因为它有时不会删除所应用的背景色。

请帮助我按预期进行这项工作，将鼠标悬停在应用颜色上，将鼠标悬停在删除它上。

这里是CodePen

使用jQuery更改悬停状态CSS

0 个答案: