Conectarse
Últimos temas
miembros del staff
Beta readers
|
|
|
|
Equipo de Baneo
|
|
Equipo de Ayuda
|
|
Equipo de Limpieza
|
|
|
|
Equipo de Eventos
|
|
|
Equipo de Tutoriales
|
|
Equipo de Diseño
|
|
créditos.
Skin hecho por Hardrock de Captain Knows Best. Personalización del skin por Insxne.
Gráficos por y codes hechos por Kaffei e Insxne.
Gráficos por y codes hechos por Kaffei e Insxne.
Dudas sobre el hover.
Página 1 de 1. • Comparte
Dudas sobre el hover.
Hola
Como dice el título, mi pequeño problema es sobre como utilizar el hover, bueno más bien si podría alguien ayudarme a utilizarlo.
He leído varios tutoriales de diferentes páginas que tratan sobre códigos y todo eso, pero siempre me quedó en las mismas, sin entender nada de nada por esa razón necesito de alguien que tenga paciencia y esté dispuesta a enseñarme paso a paso, solo así es como puedo aprender :(.
Bien, sin más por el momento, espero tener respuestas pronto.
Besos
Como dice el título, mi pequeño problema es sobre como utilizar el hover, bueno más bien si podría alguien ayudarme a utilizarlo.
He leído varios tutoriales de diferentes páginas que tratan sobre códigos y todo eso, pero siempre me quedó en las mismas, sin entender nada de nada por esa razón necesito de alguien que tenga paciencia y esté dispuesta a enseñarme paso a paso, solo así es como puedo aprender :(.
Bien, sin más por el momento, espero tener respuestas pronto.
Besos
emanon.
Re: Dudas sobre el hover.
¡Hola!
Hoy seré tu guía. Un gusto.
Bieeeeeen, ya tengo un poco de experiencia explicando este tema (debería hacer un tutorial para todos, a que sí? xd), así que si no entiendes algo, se libre de preguntar.
¡Empecemos!
Algo que debes saber es que un hover es una propiedad que se activa cuando yo paso el cursor sobre un objeto. Sencillo, sí. Y dependiendo de las propiedades que le de, puedo crear varios efectos. Pero empezaremos con el más sencillo, el de 'opacity'. ¿Has pasado el cursor por una imagen y lentamente aparece otra encima? Pues eso.
Primero, tomaré dos imágenes, una en divs diferentes. Así:
Lo que quiero es que la segunda sea la que, al pasar el el cursor por la primera, se muestre. Para hacer eso, primero nombraré a la segunda con un "id=", que es para diferenciar este objeto de los demás. Se pone antes del "style=" en el
Hoy seré tu guía. Un gusto.
Bieeeeeen, ya tengo un poco de experiencia explicando este tema (debería hacer un tutorial para todos, a que sí? xd), así que si no entiendes algo, se libre de preguntar.
¡Empecemos!
Algo que debes saber es que un hover es una propiedad que se activa cuando yo paso el cursor sobre un objeto. Sencillo, sí. Y dependiendo de las propiedades que le de, puedo crear varios efectos. Pero empezaremos con el más sencillo, el de 'opacity'. ¿Has pasado el cursor por una imagen y lentamente aparece otra encima? Pues eso.
Primero, tomaré dos imágenes, una en divs diferentes. Así:
Lo que quiero es que la segunda sea la que, al pasar el el cursor por la primera, se muestre. Para hacer eso, primero nombraré a la segunda con un "id=", que es para diferenciar este objeto de los demás. Se pone antes del "style=" en el
(Va sin el *, pero lo pongo para que el CSS del foro no o oculte) . Así:
Puedes ponerle el nombre que quieras, pero te recomiendo que sean sencillos y que no sean tan obvio, como "hover" o "img", ya que si alguien más tiene, por casualidad, una firma o una tabla con esos nombres, los atributos se combinarán y serán un problema.
Bien, una vez lo he nombrado, copiare este code dentro de la imagen anterior, dentro del div.
Me quedará así:
Ahora voy a crear el CSS que hará todo posible, empezando con un <*style type="texto/CSS"*> (sin el *) y cierro *style*>
Dentro de esto, voy a llamar al objeto con un #, sí, como si fuera un hagstag, y abriré llaves. De la siguiente manera:
Este code funciona así. Dentro de las llaves puedo poner varios atributos, los que yo quiera, para definir el div. Y como quiero que no se vea, el atributo que colocaré sera 'opacity', que se mide de 0 a 1, siendo 0 transparente y 1 totalmente visible.
Y entonces:
¡Ta-da!
Ahora, para que se vuelva a ver, dentro de las mismas llaves volveré a llamar al objeto y ésta vez añadiré la propiedad :hover.
Y dentro de las llaves de hover, colocaré lo que quiero que pase, en este caso, que la opacidad aumente.
Pasa el cursor:
Yaaaay!
Pero, eh, eso que salga tan de la nada se ve muy feo, no? entonces añadiré transitions, esto hará que vayan más lento. Mira, las transitions funcionan así:
transition: dónde cuántotiempo quétipo
En donde se coloca "all", ya que quiero que funcione en todo tipo de objeto. En quétipo puedo elegir entre: ease-in , ease-out , ease-in-out (la que yo más uso), ease y linear. Cuántotiempo es el tiempo en segundos, claro. Me quedaría así:
Esto lo pongo antes de cerrar ambas llaves:
¡Y LISTO!
Code final:
Si aún tienes dudas, eres libre de preguntar. Perdón por la 'estética' y si hay algún error, pero es que ando desde mi tablet
- Código:
<div id="a1" style="background-image: url(http://i.imgur.com/yeBTSB1.png); width: 500px; height: 200px; margin: auto;"></div>
Puedes ponerle el nombre que quieras, pero te recomiendo que sean sencillos y que no sean tan obvio, como "hover" o "img", ya que si alguien más tiene, por casualidad, una firma o una tabla con esos nombres, los atributos se combinarán y serán un problema.
Bien, una vez lo he nombrado, copiare este code dentro de la imagen anterior, dentro del div.
- Código:
<div style="background-image: url(http://data3.whicdn.com/images/140798141/large.png); width: 500px; height: 200px; margin: auto;">AQUIAQUIAQUI</div>
Me quedará así:
Ahora voy a crear el CSS que hará todo posible, empezando con un <*style type="texto/CSS"*> (sin el *) y cierro *style*>
Dentro de esto, voy a llamar al objeto con un #, sí, como si fuera un hagstag, y abriré llaves. De la siguiente manera:
- Código:
<style type="text/CSS">
#a1 { }
</style>
Este code funciona así. Dentro de las llaves puedo poner varios atributos, los que yo quiera, para definir el div. Y como quiero que no se vea, el atributo que colocaré sera 'opacity', que se mide de 0 a 1, siendo 0 transparente y 1 totalmente visible.
- Código:
<style type="text/CSS">
#a1 {opacity: 0; }
</style>
Y entonces:
¡Ta-da!
Ahora, para que se vuelva a ver, dentro de las mismas llaves volveré a llamar al objeto y ésta vez añadiré la propiedad :hover.
- Código:
<style type="text/CSS">
#a1 {opacity: 0; } #a1:hover { }
</style>
Y dentro de las llaves de hover, colocaré lo que quiero que pase, en este caso, que la opacidad aumente.
- Código:
<style type="text/css">#a1 {opacity: 0;} #a1:hover {opacity: 1;}</style>
Pasa el cursor:
Yaaaay!
Pero, eh, eso que salga tan de la nada se ve muy feo, no? entonces añadiré transitions, esto hará que vayan más lento. Mira, las transitions funcionan así:
transition: dónde cuántotiempo quétipo
En donde se coloca "all", ya que quiero que funcione en todo tipo de objeto. En quétipo puedo elegir entre: ease-in , ease-out , ease-in-out (la que yo más uso), ease y linear. Cuántotiempo es el tiempo en segundos, claro. Me quedaría así:
- Código:
transition: all 1s ease-in-out;
Esto lo pongo antes de cerrar ambas llaves:
- Código:
<style type="text/css">#a1 {opacity: 0; transition: all 1s ease-in-out;} #a1:hover {opacity: 1; transition: all 1s ease-in-out;}</style>
¡Y LISTO!
Code final:
- Código:
<div style="background-image: url(http://data3.whicdn.com/images/140798141/large.png); width: 500px; height: 200px; margin: auto;"><div id="a1" style="background-image: url(http://i.imgur.com/yeBTSB1.png); width: 500px; height: 200px; margin: auto;"></div></div>
<style type="text/css">#a1 {opacity: 0; transition: all 1s ease-in-out;} #a1:hover {opacity: 1; transition: all 1s ease-in-out;}</style>
Si aún tienes dudas, eres libre de preguntar. Perdón por la 'estética' y si hay algún error, pero es que ando desde mi tablet
Invitado
Invitado
Temas similares
» Duda sobre el Hover.
» Dudas sobre mi firma
» Dudas sobre temas nuevos.
» Beautiful Mistake (Harry Styles y ______ Tomlinson)
» —Through The Dark.
» Dudas sobre mi firma
» Dudas sobre temas nuevos.
» Beautiful Mistake (Harry Styles y ______ Tomlinson)
» —Through The Dark.
Página 1 de 1.
Permisos de este foro:
No puedes responder a temas en este foro.
|
|
Ayer a las 3:37 pm por winchester.
» Devil's advocate
Mar 16 Abr 2024, 3:31 pm por lovesick
» becauseiloveyou
Jue 11 Abr 2024, 6:12 pm por lovesick
» Our colors are grey and blue
Jue 11 Abr 2024, 12:07 pm por Jaeger.
» micky ojos verdes
Mar 09 Abr 2024, 8:12 am por MickyEche
» life is a box of chocolates
Lun 08 Abr 2024, 4:12 pm por 14th moon
» B's space.
Sáb 06 Abr 2024, 2:48 pm por lovesick
» Un guardián entre el centeno
Dom 31 Mar 2024, 4:58 pm por ego.
» Hola! Recuperar cuenta
Miér 20 Mar 2024, 2:45 pm por Only Web Novels