Question

这是代码的一部分，当我将鼠标悬停在不同的div上时，我正在尝试更改菜单项颜色。我可以修改背景颜色，但不能修改实际的文字颜色。

<!DOCTYPE html>
<html>

<head>
<title>Untitled</title>
<style type="text/css">
.navigation li a { color: grey;}
</style>
</head>

<body>
<ul  class="navigation" id="nav">
<li id="a" onmouseover="chbg('red')" onmouseout="chbg('black')"><a href="#abt">ABOUT </a></li>
<li id="b" onmouseover="chbg1('red')" onmouseout="chbg1('white')"><a href="#sequence">CONTENT</a></li>
</ul>
<script type="text/javascript">
function chbg(color) {
    document.getElementById('b').style.Color = color;
}
function chbg1(color) {
    document.getElementById('a').style.backgroundColor = color;
}
</script>
</body>
</html>`

需要帮助解决此问题。感谢

Answer 1

您正在为li应用颜色，但a已从CSS获得color: gray;。

正如评论中所提到的，使用CSS而不是JavaScript处理这样的事情要好得多。

a {
  color: gray;
}

a:hover,
a:focus {
  color: red;
}

li:hover {
  background-color: gray;
}

编辑：你似乎拼错了gray。在CSS中使用美国拼写。这是我使用十六进制值的部分原因。

Answer 2

使用CSS更容易

.navigation #a {
  background:black;
}

.navigation #b {
  background:white;
}

.navigation li:hover {
  background:black;
}

Answer 3

Demo

#a {
    background-color: black;
}
#b {
    background-color: white;
}
#b:hover {
    background-color: red;
}
#a:hover > a {
    color: green;
}
#b:hover > a {
    color: yellow;
}

HTML

<ul class="navigation" id="nav">
    <li id="a"><a href="#abt">ABOUT </a>
    </li>
    <li id="b"><a href="#sequence">CONTENT</a>
    </li>
</ul>

html：悬停时导航样式更改

3 个答案: