javascript - html悬停不同的div

标签 javascript html css

这是我一直在处理的示例代码,鼠标悬停在我想通过更改颜色突出显示菜单元素的文本上。我可以更改背景颜色,但不能更改实际的文本颜色。有人可以帮助修复吗?

<!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>

谢谢

最佳答案

您的代码无法正常工作,因为使用 js,您正在更改 color<li> , 它不会被继承到 <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';
}

关于javascript - html悬停不同的div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24265220/

相关文章:

meteor - 如何使用 Meteor.com 检测 JavaScript 是否被禁用

javascript - 重写 Node eventEmitter.on 并关闭日志记录不起作用

html - 字体不适用于 IE8 ??获取@font-face 遇到未知错误。 ?

python - 如何验证 Selenium WebDriver 中存在的动态元素

html - IE9 float 溢出 :Hidden and Table Width 100% Not Displaying Properly

CSS 所有正文内容居中

javascript - JavaScript 中的切换和选择

javascript - 为什么我在 indexOf 中用 JavaScript 找不到斜杠?

html - 是否可以逐步加载每个 CSS 文件?

html - CSS:等宽列表项(列表中最宽的元素)