html悬停不同的div答案

【问题标题】：html hover different divhtml悬停不同的div
【发布时间】：2014-08-07 13:10:30
【问题描述】：

这是我一直在处理的示例代码，鼠标放在我想通过更改颜色来突出显示菜单元素的文本上。我可以更改背景颜色，但不能更改实际的文本颜色。有人可以帮忙解决吗？

<!DOCTYPE html>

<html>
<head>
<title>Untitled</title>
<style type="text/css">
#nav  li {display: inline;}
#nav li  a {color: yellow; text-decoration: none; padding-right: 10px; }
</style>
</head>


<body>
<ul  id="nav">

<li id="a"><a href="#abt">ABOUT </a></li>
<li id="b" ><a href="#sequence">CONTENT</a></li>

</ul>


<div id="abt" onmouseover="chbg('red')" onmouseout="chbg('white')"> 

<p>
Editorial

Hard choices at Copenhagen
During the Climate Change Conference in 2009, the Obama-BASIC meeting was a watershed, saving Copenhagen from a complete collapse and also marking the emergence of the BASIC quartet as a major force i... »
A year later, no lessons learntHard choices at Copenhagen
During the Climate Change Conference in 2009, the Obama-BASIC meeting was a watershed, saving Copenhagen from a complete collapse and also marking the emergence of the BASIC quartet as a major force i... »
A year later, no lessons learntHard choices at Copenhagen
During the Climate Change Conference in 2009, the Obama-BASIC meeting was a watershed, saving Copenhagen from a complete collapse and also marking the emergence of the BASIC quartet as a major force i... »
A year later, no lessons learntHard choices at Copenhagen
During the Climate Change Conference in 2009, the Obama-BASIC meeting was a watershed, saving Copenhagen from a complete collapse and also marking the emergence of the BASIC quartet as a major force i... »
A year later, no lessons learntHard choices at Copenhagen
During the Climate Change Conference in 2009, the Obama-BASIC meeting was a watershed, saving Copenhagen from a complete collapse and also marking the emergence of the BASIC quartet as a major force i... »
A year later, no lessons learntHard choices at Copenhagen
During the Climate Change Conference in 2009, the Obama-BASIC meeting was a watershed, saving Copenhagen from a complete collapse and also marking the emergence of the BASIC quartet as a major force i... »
A year later, no lessons learntHard choices at Copenhagen
During the Climate Change Conference in 2009, the Obama-BASIC meeting was a watershed, saving Copenhagen from a complete collapse and also marking the emergence of the BASIC quartet as a major force i... »
A year later, no lessons learntHard choices at Copenhagen
During the Climate Change Conference in 2009, the Obama-BASIC meeting was a watershed, saving Copenhagen from a complete collapse and also marking the emergence of the BASIC quartet as a major force i... »
A year later, no lessons learntHard choices at Copenhagen
During the Climate Change Conference in 2009, the Obama-BASIC meeting was a watershed, saving Copenhagen from a complete collapse and also marking the emergence of the BASIC quartet as a major force i... »
A year later, no lessons learntHard choices at Copenhagen
During the Climate Change Conference in 2009, the Obama-BASIC meeting was a watershed, saving Copenhagen from a complete collapse and also marking the emergence of the BASIC quartet as a major force i... »
A year later, no lessons learnt
</p>
</div>

<div id="sequence" onmouseover="chbg1('red')" onmouseout="chbg1('white')"> 

<p>
Editorial

Hard choices at Copenhagen
During the Climate Change Conference in 2009, the Obama-BASIC meeting was a watershed, saving Copenhagen from a complete collapse and also marking the emergence of the BASIC quartet as a major force i... »
A year later, no lessons learntHard choices at Copenhagen
During the Climate Change Conference in 2009, the Obama-BASIC meeting was a watershed, saving Copenhagen from a complete collapse and also marking the emergence of the BASIC quartet as a major force i... »
A year later, no lessons learntHard choices at Copenhagen
During the Climate Change Conference in 2009, the Obama-BASIC meeting was a watershed, saving Copenhagen from a complete collapse and also marking the emergence of the BASIC quartet as a major force i... »
A year later, no lessons learntHard choices at Copenhagen
During the Climate Change Conference in 2009, the Obama-BASIC meeting was a watershed, saving Copenhagen from a complete collapse and also marking the emergence of the BASIC quartet as a major force i... »
A year later, no lessons learntHard choices at Copenhagen
During the Climate Change Conference in 2009, the Obama-BASIC meeting was a watershed, saving Copenhagen from a complete collapse and also marking the emergence of the BASIC quartet as a major force i... »
A year later, no lessons learntHard choices at Copenhagen
During the Climate Change Conference in 2009, the Obama-BASIC meeting was a watershed, saving Copenhagen from a complete collapse and also marking the emergence of the BASIC quartet as a major force i... »
A year later, no lessons learntHard choices at Copenhagen
During the Climate Change Conference in 2009, the Obama-BASIC meeting was a watershed, saving Copenhagen from a complete collapse and also marking the emergence of the BASIC quartet as a major force i... »
A year later, no lessons learntHard choices at Copenhagen
During the Climate Change Conference in 2009, the Obama-BASIC meeting was a watershed, saving Copenhagen from a complete collapse and also marking the emergence of the BASIC quartet as a major force i... »
A year later, no lessons learntHard choices at Copenhagen
During the Climate Change Conference in 2009, the Obama-BASIC meeting was a watershed, saving Copenhagen from a complete collapse and also marking the emergence of the BASIC quartet as a major force i... »
A year later, no lessons learntHard choices at Copenhagen
During the Climate Change Conference in 2009, the Obama-BASIC meeting was a watershed, saving Copenhagen from a complete collapse and also marking the emergence of the BASIC quartet as a major force i... »
A year later, no lessons learnt
</p>
</div>
<script type="text/javascript">

function chbg(color) {
    document.getElementById('a').style.cssText = 'color : black! important';
}

function chbg1(color) {
    document.getElementById('b').style.backgroundColor = color;
}


</script>


</body>
</html>

谢谢

【问题讨论】：

错字，应该是black !important 而不是black! important。除此之外，只需.style.color = color;
这只能用 CSS 来实现，我认为不需要 javascript :)
是的，我试过 style.color 它不起作用。
@user3748039 CSS 并不比 js 复杂，你可以给 div 类，可以试试div.class:hover { color:red; }这种方式
附带说明：如果您完全控制 CSS，请尽可能避免使用!important。它经常被错误地用作快速修复而不是编写适当的 CSS，以大量的 !important 语句结束，试图不断地相互覆盖。在不与第 3 方插件或 CMS 系统交互时，应该很少需要使用 !important。

标签： javascript html css

【解决方案1】：

您的代码不起作用，因为使用 js，您正在更改 <li> 的 color，它不会被继承到其中的 <a>，因为您已经明确指定了另一种颜色（黄色）。尝试类似

css:

li.hovered a{
 color: black !important;
}

js:

function chbg(color) {
 document.getElementById('a').classList.add('hovered');
}

或

function chbg(color) {
 document.getElementById('a').className+='hovered';
}

【讨论】：

如果从未使用过color，为什么要发送它？
@xxec idk，你应该问 OP。也许他与它有其他关系..？在他提供的一个示例中（我复制了），他将其设置为黑色。
当然，但由于它没有在您的答案中使用，您可以选择将其全部删除，但更可能 OP 想要它，因为该函数是使用颜色关键字调用的：onmouseover="chbg('red')" onmouseout="chbg('white')"
@xec 也许他正在发送应用到<div> 的当前颜色，并且他想根据它执行一些其他逻辑..？也许它甚至不是颜色，而是一些代码字..？我怎么知道除非它的目的被明确提及..？它可以是任何东西，因此我没有删除它。你只是在做假设。

【解决方案2】：

您的代码有几处让我觉得奇怪。首先，您的函数采用color 参数，但从未使用过。

其次，id 为a 的元素是<li>，其下方是具有自己颜色的<a> 元素。您可以尝试以下方法直接使用文本颜色定位元素：

function chbg(color) {
    document.getElementById('a').firstChild.style.color = color;
}

或者，改用document.querySelector 方法，以避免依赖<a> 作为第一个孩子（假设那里有空白文本节点）：

function chbg(color) {
    // css selector "#a a" means look for <a> as a descendant of <element id="a">
    document.querySelector('#a a').style.color = color;
}

http://jsfiddle.net/xx2fA/

我可能还应该提到，此时函数的名称也具有误导性；）

【讨论】：

谢谢你的工作。我的代码看起来很奇怪，因为我还在学习过程中