Learn Accessibility by Building a Quiz - Step 47

Hi!

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.

2 Likes

Thank you, it worked for me.

1 Like

This post helped me so much to understand where I was going wrong. Thank you very much.

1 Like