Question

对不起，如果这个问题过于特定于我自己的概念，但我完全陷入困境。当您将鼠标悬停在导航中的页面名称上时，我正在尝试将用户当前页面的标题变为橙色。换句话说，当您将鼠标悬停在值为“主页”的 li 元素上时，值为“主页”的 h1 元素将变为橙色。我正在尝试使用 .addClass 和 .removeClass 方法来改变 h1 元素橙色，但到目前为止没有运气。当我将鼠标悬停在li元素上时，就好像它甚至不能识别我的指针在那里。所有其他jQuery效果都在网站上运行。我已经在下面包含了我的完整jQuery和我的缩写HTML和CSS - 非常感谢您的帮助！

＆＃13;

#header {
  width: 100%;
  height: 40px;
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: #328cff;
  text-align: center;
  color: white;
  opacity: 0.95;
  z-index: 9999;
}
#header ul {
  height: 40px;
  padding: 0;
  margin: 0;
  position: relative;
  display: inline-block;
  list-style: none;
}
#header ul li {
  float: left;
  padding: 7px 20px 0 20px;
  height: 31px;
  transition: color 0.5s ease;
  transition: text-shadow 0.5s ease;
  font-weight: 300;
  font-size: 18px;
}
#header ul li.active {
  font-family: sans-serif;
  font-weight: 300;
  z-index: 10005;
}
#header ul a li {
  font-family: sans-serif;
  font-weight: 700;
}
#header ul a {
  text-decoration: none;
  color: white;
  transition: color 0.5s ease;
  font-family: sans-serif;
  font-weight: 700;
  font-size: 18px;
}
#header ul a:hover {
  color: #ff9100;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}
#title {
  text-align: center;
  font-size: 40px;
  font-weight: 900;
  width: 100%;
  color: white;
  font-family: sans-serif;
  background-color: #328cff;
  position: absolute;
  top: 13px;
  left: 0px;
  padding: 5px 0 10px 0;
  z-index: 30;
}
.orange {
  color: #ff9100;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $("li.active").mouseover(function() {
        $("h1#title").addClass("orange");
      });
      $("li.active").mouseout(function() {
        $("h1#title").removeClass("orange");
      });
    })
  </script>
</head>

<body>
  <div id="header">
    <ul>
      <li class="active">Home</li>
      <a href="page2.html">
        <li>Section 508 Compliance</li>
      </a>
      <a href="page3.html">
        <li>Table</li>
      </a>
    </ul>
  </div>
  <h1 id="title">Home</h1>
</body>

</html>

＆＃13;

Answer 1

这与CSS的特异性有关。使用#title覆盖使用.orange进行的颜色声明，两者都适用于<h1>。相反，只需修改您的CSS：

#title.orange {
  color: #ff9100;
}

请参阅下面的代码段：

#header {
  width: 100%;
  height: 40px;
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: #328cff;
  text-align: center;
  color: white;
  opacity: 0.95;
  z-index: 9999;
}
#header ul {
  height: 40px;
  padding: 0;
  margin: 0;
  position: relative;
  display: inline-block;
  list-style: none;
}
#header ul li {
  float: left;
  padding: 7px 20px 0 20px;
  height: 31px;
  transition: color 0.5s ease;
  transition: text-shadow 0.5s ease;
  font-weight: 300;
  font-size: 18px;
}
#header ul li.active {
  font-family: sans-serif;
  font-weight: 300;
  z-index: 10005;
}
#header ul a li {
  font-family: sans-serif;
  font-weight: 700;
}
#header ul a {
  text-decoration: none;
  color: white;
  transition: color 0.5s ease;
  font-family: sans-serif;
  font-weight: 700;
  font-size: 18px;
}
#header ul a:hover {
  color: #ff9100;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}
#title {
  text-align: center;
  font-size: 40px;
  font-weight: 900;
  width: 100%;
  color: white;
  font-family: sans-serif;
  background-color: #328cff;
  position: absolute;
  top: 13px;
  left: 0px;
  padding: 5px 0 10px 0;
  z-index: 30;
}
#title.orange {
  color: #ff9100;
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $("li.active").mouseover(function() {
        $("h1#title").addClass("orange");
      });
      $("li.active").mouseout(function() {
        $("h1#title").removeClass("orange");
      });
    })
  </script>
</head>

<body>
  <div id="header">
    <ul>
      <li class="active">Home</li>
      <a href="page2.html">
        <li>Section 508 Compliance</li>
      </a>
      <a href="page3.html">
        <li>Table</li>
      </a>
    </ul>
  </div>
  <h1 id="title">Home</h1>
</body>

</html>

Answer 2

#title CSS选择器具有比.orange选择器更高的CSS特异性，因此即使存在橙色类，它也始终具有优先权。

您可以通过将橙色CSS规则更改为此来解决此问题：

#title.orange {
  color: #ff9100;
}

当橙色类存在时，这为新规则提供了比#title规则更大的CSS特性，因此它将接管。

为什么我的jQuery不改变元素的类？

2 个答案: