How to make a hover effect a link?

[ArthurSmid]

On the index.html when the cursor hovers on the subcategory li, a background color appears and also on category.html when the cursor hovers on the provider li, a background-color appears. Ideally the text would become blue when the gray background color appears.

When the background color is the link style, for example the category-name on index.html, I'm able to get a hover over on the background to change the anchor tag color from black to blue.

But when the background color is a hover over effect, I haven't been able to get the anchor tag to become blue when hovering on the background color alone, it only becomes blue when the cursor is placed directly over the link.

[frankylee]

If I understand correctly, you would like the provider links on hover in the Category page to match the subcategory links on hover in the Index?

Match the provider li hover on line 262 in category.css to line 250 in styles.css by adding the color property.

/* line 262 in category.css */
.provider li:hover {
    background-color: rgb(226, 226, 226);
}

/* line 250 in styles.css */
.subcategory li:hover {
    color: #086CDD;
    background-color: rgb(226, 226, 226);
}

[ArthurSmid]

Thanks for looking into this!

I went in and tried your suggestion, and apparently, it's not quite the thing. We do get the color change of the text upon hovering over the text itself. But, and this is a very niche issue: try running a cursor to the right of the text, a gray background appears as desired, but the blue text doesn't.

We're able to get that blue text style to happen when hovering on that background gray off to the right of the category name, and so what I'm trying to figure out: why doesn't the text color change when hovering alongside (but not directly on) the provider names?

[frankylee]

Ahh, found it! It needed display: block to fill the li parent.