linkedin / linkedin/linkedin.github.com
(web browser) Hover Effect on Non-Clickable Divs in Alphabet Navigation on LinkedIn's Content Hub Directory
Nadie ha tomado este issue todavía.
- Lenguaje dominante
- JavaScript
- Estrellas
- 67
- Forks
- 50
- Métricas de merge de PR
- Sin PR fusionados en 30 d
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
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.
Guía de contribución
No hay ninguna guía de contribución indexada para este repositorio
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
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.
Evaluación
- Stack tecnológico
- css, javascript
- Área
- design, frontend
- Tipo de issue
- Error
- Dificultad
- 3/5
- Tiempo estimado
- 1-2 días
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 25/100