When hovering over various div elements in HTML

Question

When hovering over various div elements in HTML

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

javascript html css

Answer 1

Answer №1

Your code isn't functioning as expected because when you use JavaScript to change the text color of an <li> element, it doesn't automatically apply to the <a> element inside it due to a different color (yellow) being explicitly specified for it. You can try a solution like this:

CSS:

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

JavaScript:

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

or

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

Answer 2

Your code isn't functioning as expected because when you use JavaScript to change the text color of an <li> element, it doesn't automatically apply to the <a> element inside it due to a different color (yellow) being explicitly specified for it. You can try a solution like this:

CSS:

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

JavaScript:

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

or

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

Answer 3

Answer №2

Upon reviewing your code, a few things stand out as peculiar. Firstly, it seems that the color argument in your function is not actually utilized.

Additionally, it appears that the element with the id a is a <li>, followed by an <a> element with its own color property. You may want to consider targeting the text color of the element directly using something like this:

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

Another approach could be utilizing the document.querySelector method instead, to ensure you're selecting the correct element even if there are whitespace nodes present:

function chbg(color) {
    // The CSS selector "#a a" targets the <a> element within the parent <element id="a">
    document.querySelector('#a a').style.color = color;
}

http://jsfiddle.net/xx2fA/

It's also worth noting that the name of the function may be misleading in its current state.

Answer 4

Upon reviewing your code, a few things stand out as peculiar. Firstly, it seems that the color argument in your function is not actually utilized.

Additionally, it appears that the element with the id a is a <li>, followed by an <a> element with its own color property. You may want to consider targeting the text color of the element directly using something like this:

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

Another approach could be utilizing the document.querySelector method instead, to ensure you're selecting the correct element even if there are whitespace nodes present:

function chbg(color) {
    // The CSS selector "#a a" targets the <a> element within the parent <element id="a">
    document.querySelector('#a a').style.color = color;
}

http://jsfiddle.net/xx2fA/

It's also worth noting that the name of the function may be misleading in its current state.

When hovering over various div elements in HTML

Answer №1

Answer №2

Similar questions

Troubleshooting jQuery Dropdown Menu Animation Bugs

Is it possible for me to route a URL to a particular content generated by Ajax on a separate webpage?

"Implement a smooth scrolling animation on the page to automatically move a div element upward and lock

Expanding sidebar height to match parent using Flexbox

The vanishing act of custom fonts in Internet Explorer

Can VueJS support multiple v-slots in a component?

When implementing protractor spyOn() with jQuery's ajax() function, an error is triggered stating 'ajax() method is non-existent'

inputting an array of strings into the value attribute of an input element using jQuery

Creating models or bulk creating promises in a seed file

Is it possible to use a Proxy-object instead of just an index when changing tabs in material-ui/Tabs?

CSS: choose all elements starting from the n-th element and apply styles to them

Having trouble loading AngularJS 2 router

Issue with LAMP Stack: HTML table updates are not syncing correctly with the database

Discovering nested documents in MongoDB using JavaScript

Encountering error TS2307 while using gulp-typescript with requirejs and configuring multiple path aliases and packages

Enter text into a field on a different webpage and verify if the output matches the expected result

Sideways movement of a single line within a table

I attempted to use the Stripe API, but it seems to be non

What sorcery does Facebook use to alter the URL without triggering a page reload?

Issue: The module '[object Object]' could not be located