I've been experimenting with some code lately, and I'm trying to change the text color of a menu element when hovering over it. I can alter the background color just fine, but for some reason, the text color remains unchanged. Can anyone offer a solution?
<!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 wa...
...
function chbg(color) {
document.getElementById('a').style.cssText = 'color : black! important';
}
function chbg1(color) {
document.getElementById('b').style.backgroundColor = color;
}
</script>
</body>
</html>
Thanks