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

还没有人认领这个 Issue。

**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](https://www.linkedin.com/pulse/topics/browse/f/)
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
![Uploading Content Hub Directory Page - Google Chrome 7_29_2024 3_35_25 PM.png…]()

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.

未指定 repository 文件或测试。请在 Chrome 中打开 LinkedIn Content Hub Directory，复现字母导航的悬停行为，并检查字母容器的 CSS；完成标准是只有可点击的字母显示悬停反馈，而周围不可点击的区域不显示。

由索引模型根据 Issue 内容生成。