Javascript html：悬停时更改导航样式_Javascript_Css_Html_Menu_Hover

Javascript html：悬停时更改导航样式

javascript css html menu

Javascript html：悬停时更改导航样式,javascript,css,html,menu,hover,Javascript,Css,Html,Menu,Hover,这是代码的一部分，在代码中，当鼠标悬停在不同的div上时，我试图更改菜单项的颜色。我可以修改背景颜色，但不能修改实际的文本颜色 <!DOCTYPE html> <html> <head> <title>Untitled</title> <style type="text/css"> .navigation li a { color: grey;} </style> </head> <body

这是代码的一部分，在代码中，当鼠标悬停在不同的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>`


无标题
.a{颜色：灰色；}




功能chbg（颜色）{
document.getElementById（'b'）.style.Color=Color；
}
功能chbg1（颜色）{
document.getElementById（'a'）.style.backgroundColor=颜色；
}
`

需要帮助解决这个问题。

谢谢

您正在对

li

应用颜色，但是

已经得到

颜色：灰色来自CSS
正如在评论中提到的，您最好使用CSS而不是JavaScript来处理此类内容
a {
  color: gray;
}

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

li:hover {
  background-color: gray;
}

编辑：您似乎还拼错了灰色
。CSS使用美式拼写。这就是为什么我使用十六进制值来代替它的部分原因。
使用CSS更容易
.navigation #a {
  background:black;
}

.navigation #b {
  background:white;
}

.navigation li:hover {
  background:black;
}


HTML






您最好使用CSS：hover来实现这一点。您尝试使用Javascript实现这一点有什么特别的原因吗？是的。。但这只是一个示例代码，我真正想要的是，当页面的某个特定部分悬停时，我希望菜单样式发生变化。以显示零件引用该特定菜单部分。我不确定这是否真的有意义他。。感谢您的评论，但这里不会发生样式交换。。我是新手，你说的“风格交换”是什么意思？你不是在试图取得一些联系吗？
#a {
    background-color: black;
}
#b {
    background-color: white;
}
#b:hover {
    background-color: red;
}
#a:hover > a {
    color: green;
}
#b:hover > a {
    color: yellow;
}

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