There is a hover issue with nav block dropdown items: hover CSS is applied to link wrapper instead of the link itself.
So when hovering on the right of dropdown item label, hover effect is applied to the label whereas we are not hovering the link and so it is not clickable. This is confusing for the user.
Thx @Jonas, your answer made me realize I should have used the wrapper for all my hover styling anyway, and then it is correctly applied to the link wrapper
But still, I think there’s an issue when using hover on the label, since the :hover selector is applied on the li wrapper and not the label itself.
At least, there’s some inconsistency in how hover properties are applied.
I didn’t notice a hover issue with the label. But you are correct. the hover styles should be applied to the clickable element – in this case the Wrapper
Sorry to hear you’re experiencing trouble with this.
Thank you @Jonas for helping out!
It seems there may be some confusion, so let me clarify the reasoning behind applying hover styles to the li wrapper instead of the individual label and description.
The primary purpose of this approach is to simplify the styling process.
When dealing with navigation elements, it’s crucial to consider the user’s interaction with the link as a whole, treating it as a single clickable entity.
By applying the hover styles to the wrapper, users will experience the desired styling when they hover over the complete link.
This ensures consistency and prevents confusion for users who expect the hover effect to encompass the entire link, including the label and description.
In essence, users select the wrapper as a unified element rather than perceiving the label and description as separate entities.
Thus, applying the hover styles to the wrapper is the logical choice.
However, if you prefer to apply the hover styles specifically for the label, feel free to create your own relative style to achieve that.
We definitely don’t want inconsistencies!
If you can explicit your point of view, it might help us understand how to avoid them.