O W N
¡Conéctate y ven a divertirte con nosotr@s! :)
Si no estás registrado, hazlo y forma parte de nuestra gran comunidad.
¡La administración ha modificado otra vez el foro, y los Invitados ya pueden ver todas las secciones! Aún así, para comentar y crear temas debes tener una cuenta.

Cualquier duda, queja o sugerencia que quieras darle al staff, éste es nuestro facebook: https://www.facebook.com/onlywebnovels

¡IMPORTANTE!, los Mensajes Privados de los Invitados no serán respondidos por la administración. Te esperamos en nuestro facebook (:

Atte: Staff OnlyWns.
Conectarse

Recuperar mi contraseña

Últimos temas
» Heroes. (Muro Interactivo)
Hoy a las 11:39 am por yagmur.

» I write sins not tragedies
Hoy a las 9:44 am por Andy Belmar.

» fallen angels [muro]
Hoy a las 9:23 am por Andy Belmar.

» dark wings, dark words.
Hoy a las 9:21 am por hypatia.

» The thing you are most afraid to write. Write that.
Hoy a las 8:20 am por hypatia.

» The Breakfast Club - Novela colectiva - Inscripciones abiertas.
Hoy a las 7:54 am por Andy Belmar.

» Get It Right
Hoy a las 7:44 am por Andy Belmar.

» daydreamin'. ♡
Ayer a las 10:45 pm por bwiyomi.

» the fire's in our hearts'
Ayer a las 8:18 pm por Ritza.

novedades

00 . 01 Anuncios del mes febrero.
00 . 02 Actualización del PROTOCOLO, nueva medida obligatoria de avatares.
00 . 03 Remodelación del foro febrero del 2017.
00 . 00 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
administradora
Rumplestiltskin. ϟ Jenn.
miembros del staff
Beta readers
ϟ hypatia.
aka Kate.
MP ϟ Ver perfil.
ϟ dépayser
aka Lea.
MP ϟ Ver perfil.
ϟ youngjae
aka .
MP ϟ Ver perfil.
ϟ Stark.
aka Cande.
MP ϟ Ver perfil.
Equipo de Baneo
ϟ Ariel.
aka Dani.
MP ϟ Ver perfil.
ϟ ceonella.
aka Cami.
MP ϟ Ver perfil.
Equipo de Ayuda
ϟ Ritza.
aka Ems.
MP ϟ Ver perfil.
ϟ Charlie.
aka idk.
MP ϟ Ver perfil.
Equipo de Limpieza
ϟ Legendary.
aka Steph.
MP ϟ Ver perfil.
ϟ chihiro
aka Zoe.
MP ϟ Ver perfil.
ϟ Kurisu
aka Teph.
MP ϟ Ver perfil.
ϟ Calore
aka idk.
MP ϟ Ver perfil.
Equipo de Eventos
ϟ ego.
aka Kalgh/Charlie.
MP ϟ Ver perfil.
ϟ Asclepio.
aka Gina.
MP ϟ Ver perfil.
ϟ mieczyslaw
aka Alec.
MP ϟ Ver perfil.
Equipo de Tutoriales
ϟ Kida.
aka Ally.
MP ϟ Ver perfil.
ϟ Spencer.
aka Angy.
MP ϟ Ver perfil.
Equipo de Diseño
ϟ insxne.
aka Mile.
MP ϟ Ver perfil.
ϟ yoongi.
aka Valu.
MP ϟ Ver perfil.
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.

Dudas sobre el hover.

Ver el tema anterior Ver el tema siguiente Ir abajo

Dudas sobre el hover.

Mensaje por gerard. el Miér 27 Ene 2016, 9:25 pm

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
avatar


Ver perfil de usuario

Volver arriba Ir abajo

Re: Dudas sobre el hover.

Mensaje por yoongi. el Dom 07 Feb 2016, 12:04 pm

¡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 (Va sin el *, pero lo pongo para que el CSS del foro no o oculte) . Así:

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

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

___________________________________________

Don't be afraid, love is the way. Shawty I got it, you can call me monster.
♡Monster♡
avatar


Ver perfil de usuario http://www.instagram.com/min.yoongilicious
 
 

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba


Permisos de este foro:
No puedes responder a temas en este foro.