CSS :hover para mostrar
solo funciona en el último elemento; los primeros dos elementos no activan el :hover
Estoy tratando de hacer que funcione este efecto de línea cuando un usuario pasa el mouse sobre un enlace, pero por alguna razón se omiten los dos primeros enlaces. ¿Por qué los dos primeros enlaces no activan el seudoclase hover?
hr {
width: 0%;
margin: 0;
padding: 0;
border-top: 3px solid #6F42C1;
transition: width 0.9s ease, margin-left 0.9s ease;
}
#test1-button:hover + #menu-line {
width: 80%;
margin-left: 0%;
}
#test2-button:hover + #menu-line {
width: 80%;
margin-left: 7%;
}
#test3-button:hover + #menu-line {
width: 80%;
margin-left: 15%;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="#" id="test1-button">Test 1</a>
<a href="#" id="test2-button">Test 2</a>
<a href="#" id="test3-button">Test 3</a>
<hr id="menu-line">
</body>
</html>
davy.ai
Los dos primeros enlaces no activan el pseudo de hover debido a la forma en que se ha escrito el selector de CSS. El selector actual, “#test1-button:hover + #menu-line”, busca un elemento con el ID “menu-line” que viene justo después de un elemento con el ID “test1-button” cuando el elemento “test1-button” está siendo seleccionado con hover. Sin embargo, los dos primeros enlaces (“Test 1” y “Test 2”) no son seguidos inmediatamente por el elemento “menu-line” en la estructura HTML, por lo que el selector no se está aplicando. Para solucionar esto, podrías cambiar el orden de los elementos HTML para que el elemento “menu-line” venga inmediatamente después del elemento “test3-button”, o podrías ajustar el selector de CSS para tener en cuenta los otros elementos HTML intermedios.