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
» tropical night.
Hoy a las 9:56 pm por changkyun.

» A house made of cards and us, inside.
Hoy a las 9:50 pm por wang.

» Revolution.{Codes]
Hoy a las 9:46 pm por candymalik

» Crazy thoughts of a sinister mind
Hoy a las 9:44 pm por Andy Belmar.

» ALIADOS: ENTRE EL CIELO Y LA TIERRA
Hoy a las 9:33 pm por candymalik

» new rules ♡ muro interactivo
Hoy a las 9:26 pm por Stark.

» ♡ snow flower.
Hoy a las 9:21 pm por sagittarius

» trust the unknown
Hoy a las 9:07 pm por changkyun.

» LA CLINICA
Hoy a las 8:59 pm por candymalik

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 psicosis. el Jue Ene 28, 2016 1:25 am

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 Feb 07, 2016 4: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

___________________________________________

All of this isn't just a coincidence.
♡Serendipity♡
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.