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

Abierto
#28 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
25/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
css, javascript
Área
design, frontend

Línea de trabajo

No se nombra ningún archivo del repositorio ni ninguna prueba. Abre el LinkedIn Content Hub Directory en Chrome, reproduce el comportamiento de hover de la navegación alfabética e inspecciona el CSS de los contenedores de las letras; se considera terminado cuando solo las letras en las que se puede hacer clic muestran feedback de hover y el área circundante no clicable no lo muestra.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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
Content Hub Directory Page - Google Chrome 7_29_2024 3_35_20 PM

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.

Lenguaje dominante
JavaScript
Estrellas
67
Forks
50
Sin PR fusionados en 30 d

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de linkedin/linkedin.github.com

Todos los issues de linkedin/linkedin.github.com

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.