I don’t understand whats wrong here:
mission:
You should give hovered li elements a color of #1b1b32 .
I already did that
Where am i wrong?..
Thanks for support!
li > a{
text-decoration:none;
}
nav li:hover{background-color: #dfdfe2; cursor: pointer; }
li:hovered{color:#1b1b32;
}
li > a {
color: inherit;
Replace these two sentences with your copied code.
Please leave the line above and the line below,
because they allow your code to properly format in the post.
**Your browser information:**
User Agent is: <code>Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36</code>
**Challenge:** Learn Accessibility by Building a Quiz - Step 47
**Link to the challenge:**
https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-47
The instruction: "To make the navigation buttons look more like typical buttons,
remove the underline from the anchor tags.
Then, create a new selector targeting the navigation list elements so that when the cursor hovers over them, the background color and text color are switched, and the cursor becomes a pointer."
First, why did you delete the color: inherit; property and its value from the existing code line in this challenge? Restart step. You should target ‘li’ elements by using the following rule:
parent element > child element > element within the child:hover {
property: value; ........property is 'background-color'
property: value; ..........property is 'color'
property: value; .......... property is 'cursor'
}
The ‘parent’ element is the ‘nav’ element,
The ‘child’ element is the ‘ul’ element,
The ‘element within the child’ is the ‘li’ element.
Add text-decoration: none; to the existing li > a.