Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » HTML » Transicion y Hover en css

HTML - Transicion y Hover en css

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 4
Ha aumentado su posición en 7 puestos en HTML (en relación al último mes)
Gráfica de HTML

Transicion y Hover en css

Publicado por Fulano (2 intervenciones) el 28/03/2019 22:41:57
Hola,soy un aprendiz en esto del diseño web y estoy intentando hacer transiciones, estaba siguiendo un tutorial para hacer que al pasa el cursor sobre la palabra esta cambie de color a negro en el tutorial obviamente al tipo le salio bien pero cuando lo intento yo no me funciona.

aquí les dejo los archivos html y css y agradezco de antemano su colaboración. Sé que es un tema que seguro a muchos de ustedes no les parecerá gran cosa pero a mí que apenas estoy aprendiendo me ayudaría mucho.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 1.453
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Transicion y Hover en css

Publicado por joel (460 intervenciones) el 29/03/2019 08:19:03
Hola Fulano, no se como lo hacia en el ejemplo que mencionas, pero yo te he modificado un par de lineas que te he marcado en negrita
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
body{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: 'Poppins', sans-serif;
}
 
ul{
    position: relative;
    margin: 0;
    padding: 0;
 
}
 
ul li{
    list-style: none;
    margin: 0;
    font-size: 1.5em;
}
 
ul li a{
    position: relative;
    color: #ddd;

    text-decoration: none;
    font-weight: 700;
    transition: 0.5s ease-in-out;
}
 
ul li a:hover {
    color:Black;
}
 
ul li a:before{
    content: attr(data-text);
    position: absolute;
    top: -2px;
    width: 100%;
    color: #262626;

    overflow: hidden;
    white-space: nowrap;
}
 
ul:hover li a:before{
    width: 0;
 
}
 
ul li:hover a:before{
    width: 100%;
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 4
Ha aumentado su posición en 7 puestos en HTML (en relación al último mes)
Gráfica de HTML

Transicion y Hover en css

Publicado por Fulano (2 intervenciones) el 29/03/2019 21:06:13
Muchas gracias por tu ayuda :)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar