(web browser) Hover Effect on Non-Clickable Divs in Alphabet Navigation on LinkedIn's Content Hub Directory

[Omair-Akbar]

Issue:

When navigating LinkedIn's Content Hub Directory, users are presented with an alphabet navigation bar (A-Z) to find topics of interest. Each alphabet letter is a clickable link that leads to a list of topics starting with that letter. However, there is a UX issue where hovering over the container divs of these alphabet letters shows a hover effect, making it appear as though the entire div is clickable, but only the letters themselves are actually clickable.

Steps to Reproduce:

Navigate to LinkedIn's Content Hub Directory LinkedIn explore articles
Hover the mouse over the div containing the alphabet letters.
Observe the hover effect on the div, suggesting it is clickable.
Attempt to click on the div area around the letters and notice that it is not clickable.
Expected Behavior:
Only the alphabet letters should have the hover effect to clearly indicate the clickable area. The surrounding div should not have a hover effect to avoid confusion.

Actual Behavior:
The div surrounding the alphabet letters shows a hover effect, misleading users into thinking that the entire div is clickable when only the letters are.

Screenshot:

looks clickable but actually its not work

Its working properly

Browser & Version:

Browser: Google Chrome
Version: 114.0.5735.198 (64-bit)

Suggested Fix:
Adjust the CSS to ensure that only the alphabet letters have the hover effect and are visually distinguished as clickable elements. if you want to use as it is then wrap into that navigates to that alphabets

Additional Notes:
because of that issue sometime its look like linkedin is not working Improving this aspect of the user interface will enhance user experience by providing clear and accurate visual feedback about clickable elements.