El efecto hover como el de youtube.
1 respuesta
Puedes hacerlo asi:
li {
list-style: none;
display: inline;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
padding: 10px 10px 10px 10px;
font-size: 20px;
margin-left: 5px;
transition: border-bottom 80ms;
cursor: pointer;
}
.selected,
li:hover {
border-bottom: 7px solid rgba(255, 0, 0, 0.7);
padding-bottom: 3px;
}
<ul>
<li>Home</li>
<li>Trending</li>
<li>Subscriptions</li>
</ul>
La explicación de este fenómeno se encuentra en dos secciones del código previamente señalado. En la primera parte de los estilos, aparece la línea transition: border-bottom 80ms
. Esta línea indica que cada vez que se cambie la propiedad descrita en el elemento, va a realizarse con una transición de 80 milisegundos. En la segunda parte, se define el estilo que va a tener el li
cuando se le posicione el cursor encima (:hover). Al modificar la propiedad border-bottom
, se pone en práctica la regla de transición definida antes, por lo que se crea el efecto. Existe una forma de aplicarle dicha transición a todas las propiedades de un elemento y es escribiendo simplemente transition: all __ms;
. Véase que también se pueden usar distintos tipos de notaciones de tiempo, como s para los segundos etc...
-
3Buena respuesta. Quizás se podría beneficiar con un pequeño comentario explicando brevemente cómo es que se está logrando el estilo y la transición. Está el código que funciona, pero ¿cómo y por qué?– MarianoCommented el 12 nov. 2016 a las 5:29
-
@Mariano: Ok Gracias por el comentario. Voy a editar la respuesta. Commented el 2 dic. 2016 a las 2:05