html : 悬停时的导航样式更改答案

【问题标题】：html : navigation style change on hoverhtml : 悬停时的导航样式更改
【发布时间】：2014-06-17 10:28:37
【问题描述】：

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

在解决此问题时需要帮助。谢谢

【问题讨论】：

你最好使用 CSS :hover 来实现这一点。
您尝试使用 Javascript 执行此操作有什么特别的原因吗？
是的.. 但这只是一个示例代码，我真正想要的是当我的页面的特定部分悬停时，我希望改变菜单样式。以表明该部分是指该特定菜单部分。我不确定这是否真的有意义

标签： javascript css html menu hover

【解决方案1】：

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

正如评论中提到的，你最好用 CSS 而不是 JavaScript 来处理这样的事情。

a {
  color: gray;
}

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

li:hover {
  background-color: gray;
}

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

【讨论】：

嘿..感谢您的评论，但样式交换不会在这里发生..我是新手..
“样式交换”是什么意思？你不是想实现一些链接this吗？

【解决方案2】：

使用 CSS 更容易

.navigation #a {
  background:black;
}

.navigation #b {
  background:white;
}

.navigation li:hover {
  background:black;
}

【讨论】：

【解决方案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>

【讨论】：