-4

El efecto hover como el de youtube.

El efecto hover como el de youtube.

1
  • Aqui lo tienes: demo Commented el 12 nov. 2016 a las 2:35

1 respuesta 1

7

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...

2
  • 3
    Buena 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é?
    – Mariano
    Commented el 12 nov. 2016 a las 5:29
  • @Mariano: Ok Gracias por el comentario. Voy a editar la respuesta.
    – Isaac Vega
    Commented el 2 dic. 2016 a las 2:05

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.