Learn Accessibility by Building a Quiz - Step 47


I don’t understand whats wrong here:
You should give hovered li elements a color of #1b1b32 .

I already did that
Where am i wrong?..
Thanks for support!

li > a{

nav li:hover{background-color: #dfdfe2; cursor: pointer; }

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/ Safari/537.36</code>

**Challenge:**  Learn Accessibility by Building a Quiz - Step 47

**Link to the challenge:**

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.


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