Duda HTML5/CSS3

Archivado
Estoy usando el efecto hover sobre 3 imágenes pero tengo un problema, imaginaros 3 botones/imágenes llamados 01 02 03, y que al dar click sobre el 01 hace el efecto que yo puse, el problema es que si por ejemplo le damos al 02 o al 03, también se activa el efecto hover sobre sus anteriores , en este caso 01 si dejo el ratón sobre el 02...

(Es pero que me entendieseis xd)

y luego la otra duda es como dejo el efecto activo sin que este el ratón ahí , durante x tiempo? o mientras se esté en un apartado?

Código -->

.a01
   {
      margin-top: 219px;
      margin-left: -426px;
       width: 36px;
      height: 32px;
      background-image:url(images/01.png);
      transition: all 1s ease;
   }
      
   .a01:hover
   {
      background-image:url(images/01act.png);
   }
   
   .b02
   {
      position:fixed;
      margin-left: 38px;
      width: 36px;
      height: 32px;
      background-image:url(images/02.png);
      transition: all 1s ease;
   }
         
   .b02:hover
   {
      background-image:url(images/02act.png);
   }
   
   .c03
   {
      margin-left: 38px;
      width: 36px;
      height: 32px;
      background-image:url(images/03.png);
      transition: all 1s ease;
   }
   
   .c03:hover
   {
      background-image:url(images/03act.png);
   }
Creo que tu error está en que has metido el "div class" del botón 2 dentro del "div class" del botón 1 y con el botón 3 igual, debes ponerlo fuera
nhurf escribió:Estoy usando el efecto hover sobre 3 imágenes pero tengo un problema, imaginaros 3 botones/imágenes llamados 01 02 03, y que al dar click sobre el 01 hace el efecto que yo puse, el problema es que si por ejemplo le damos al 02 o al 03, también se activa el efecto hover sobre sus anteriores , en este caso 01 si dejo el ratón sobre el 02...

(Es pero que me entendieseis xd)

y luego la otra duda es como dejo el efecto activo sin que este el ratón ahí , durante x tiempo? o mientras se esté en un apartado?

Código -->

.a01
   {
      margin-top: 219px;
      margin-left: -426px;
       width: 36px;
      height: 32px;
      background-image:url(images/01.png);
      transition: all 1s ease;
   }
      
   .a01:hover
   {
      background-image:url(images/01act.png);
   }
   
   .b02
   {
      position:fixed;
      margin-left: 38px;
      width: 36px;
      height: 32px;
      background-image:url(images/02.png);
      transition: all 1s ease;
   }
         
   .b02:hover
   {
      background-image:url(images/02act.png);
   }
   
   .c03
   {
      margin-left: 38px;
      width: 36px;
      height: 32px;
      background-image:url(images/03.png);
      transition: all 1s ease;
   }
   
   .c03:hover
   {
      background-image:url(images/03act.png);
   }

Sobre la primera parte, ni idea, no entiendo lo que quieres decir (tal vez si copiaras aqui el código html correspondiente :P)
Sobre la segunda parte, quizas aplicando
transition: all 1s ease x;

sobre los "hover", siendo X la cantidad de segundos que quieras que se mantenga el cambio (X es el tiempo de retraso o delay)
Más info:
http://www.w3schools.com/cssref/css3_pr_transition.asp
http://www.w3schools.com/cssref/css3_pr ... -delay.asp
PD: Debería funcionar, pero no estoy seguro, pruébalo y comentas.
toni-v escribió:Creo que tu error está en que has metido el "div class" del botón 2 dentro del "div class" del botón 1 y con el botón 3 igual, debes ponerlo fuera

Efectivamente, muchas gracias [carcajad]

Es que había leido en un manual de microsoft que la principal novedad de html5 es que no hacia falta cerrar las etiquetas

Xavy_S, ahora pruebo lo que dices ;) gracias. después edito.

Edito ; no funciona el código que has dado --> Especifica el número de segundos o milisegundos a esperar antes de que comience el efecto de transición
nhurf escribió:
toni-v escribió:Creo que tu error está en que has metido el "div class" del botón 2 dentro del "div class" del botón 1 y con el botón 3 igual, debes ponerlo fuera

Efectivamente, muchas gracias [carcajad]

Es que había leido en un manual de microsoft que la principal novedad de html5 es que no hacia falta cerrar las etiquetas

Xavy_S, ahora pruebo lo que dices ;) gracias. después edito.

Edito ; no funciona el código que has dado --> Especifica el número de segundos o milisegundos a esperar antes de que comience el efecto de transición

Lo pongo por si acaso no me expresé bien, tiene que quedar algo así:
   .a01:hover
   {
      background-image:url(images/01act.png);
transition: all 1s ease 4s;
   }

He puesto 4, como puede ser 2, es el tiempo que tardará en activarse el effecto de transición
Gracias, pero como bien has dicho es el tiempo que tardará en activarse , xD y no el tiempo que tardara en activarse, gracias igualmente, buscaré alguna etiqueta alternativa ;-)
nhurf escribió:Gracias, pero como bien has dicho es el tiempo que tardará en activarse , xD y no el tiempo que tardara en activarse, gracias igualmente, buscaré alguna etiqueta alternativa ;-)

¬_¬ ¬_¬

PD: El tiempo que tarde en activarse cualquier efecto de :hover, hará que el efecto de :hover permanecerá activo durante ese retraso, que es lo que entendí de tu primer post
nhurf escribió:y luego la otra duda es como dejo el efecto activo sin que este el ratón ahí , durante x tiempo? o mientras se esté en un apartado?


EDIT: siento ser tan "pesado", pero no lo entiendo, tal vez si planteas de nuevo el problema me aclare más XD
Xavy_S escribió:
nhurf escribió:Gracias, pero como bien has dicho es el tiempo que tardará en activarse , xD y no el tiempo que tardara en activarse, gracias igualmente, buscaré alguna etiqueta alternativa ;-)

¬_¬ ¬_¬

PD: El tiempo que tarde en activarse cualquier efecto de :hover, hará que el efecto de :hover permanecerá activo durante ese retraso, que es lo que entendí de tu primer post
nhurf escribió:y luego la otra duda es como dejo el efecto activo sin que este el ratón ahí , durante x tiempo? o mientras se esté en un apartado?


EDIT: siento ser tan "pesado", pero no lo entiendo, tal vez si planteas de nuevo el problema me aclare más XD

Jdr... Tengo que repasar lo que escribo que a veces parece que voy ebrio xd. [+risas]

Entonces, por lo que dices el tiempo que permanecerá activo es = al tiempo que tardará en activarse?

y sobre lo otro, pues a ver... Quiero que permanezca el efecto :hover, mientras la noticia este en el 01. Para explicarme mejor-->

Como he dicho antes el recuadro tiene 3 imgs, con su :hover, cada uno correspondiente a su noticia... Pues bien, como hago para que cuando este la noticia en el 02, se permanezca activo el :hover.

Thx.
7 respuestas
Archivado
Volver a General