Foros del Web » Creando para Internet » CSS »

No me funciona :active

Estas en el tema de No me funciona :active en el foro de CSS en Foros del Web. Hola a todos, tengo 7 botones, cada uno cuenta con dos images, cuando paso el maus por encima se cambia, con "hover", lo que necesito ...
  #1 (permalink)  
Antiguo 17/03/2011, 23:29
Avatar de fedefrankk  
Fecha de Ingreso: agosto-2007
Mensajes: 783
Antigüedad: 10 años, 4 meses
Puntos: 7
Pregunta No me funciona :active

Hola a todos, tengo 7 botones, cada uno cuenta con dos images, cuando paso el maus por encima se cambia, con "hover", lo que necesito es que al hacer click sobre ese boton se mantenga la imagen de "hover", osea boton activo, me dijieron que use "active". pero no me sale, alguna sugerencia?.

Gracias de antemano y saludos a todos.

Código CSS:
Ver original
  1. .BYIMAG2{position:absolute;width:95px;height:38px;background-image:url(imag_b/bt1.jpg);background-repeat:no-repeat;left:251px; top:0px}
  2. .BYIMAG2:hover{position:absolute;background:url(imag_b/b1.jpg);cursor:pointer;}
  3. .BYIMAG3{position:absolute;width:88px;height:38px;background-image:url(imag_b/bt2.jpg);background-repeat:no-repeat;left:346px; top:0px}
  4. .BYIMAG3:hover{position:absolute;background:url(imag_b/b2.jpg);cursor:pointer;}
  5. .BYIMAG4{position:absolute;width:86px;height:38px;background-image:url(imag_b/bt3.jpg);background-repeat:no-repeat;left:434px; top:0px}
  6. .BYIMAG4:hover{position:absolute;background:url(imag_b/b3.jpg);cursor:pointer;}
  7. .BYIMAG4:active{position:absolute;background:url(imag_b/b4.jpg));cursor:pointer;}
  8. .BYIMAG5{position:absolute;width:85px;height:38px;background-image:url(imag_b/bt4.jpg);background-repeat:no-repeat;left:520px; top:0px}
  9. .BYIMAG5:hover{position:absolute;background:url(imag_b/b4.jpg);cursor:pointer;}
  10. .BYIMAG5:active{position:absolute;background:url(imag_b/b4.jpg);cursor:pointer;}
  11. .BYIMAG6{position:absolute;width:87px;height:38px;background-image:url(imag_b/bt5.jpg);background-repeat:no-repeat;left:605px; top:0px}
  12. .BYIMAG6:hover{position:absolute;background:url(imag_b/b5.jpg);cursor:pointer;}
  13. .BYIMAG7{position:absolute;width:86px;height:38px;background-image:url(imag_b/bt6.jpg);background-repeat:no-repeat;left:692px; top:0px}
  14. .BYIMAG7:hover{ bposition:absolute;background:url(imag_b/b6.jpg);cursor:pointer;}
  15. .BYIMAG8{position:absolute;width:122px;height:170px;background-image:url(imag_b/bt7.jpg);background-repeat:no-repeat;left:778px; top:0px}
  16. .BYIMAG8:hover{position:absolute;background:url(imag_b/b7.jpg);cursor:pointer;}

Fede
  #2 (permalink)  
Antiguo 18/03/2011, 00:58
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 6 años, 9 meses
Puntos: 192
Respuesta: No me funciona :active

En tu código sólo veo el active 2 veces. Uno de esos es:

Código CSS:
Ver original
  1. .BYIMAG5{position:absolute;width:85px;height:38px;background-image:url(imag_b/bt4.jpg);background-repeat:no-repeat;left:520px; top:0px}
  2. .BYIMAG5:hover{position:absolute;background:url(imag_b/b4.jpg);cursor:pointer;}
  3. .BYIMAG5:active{position:absolute;background:url(imag_b/b4.jpg);cursor:pointer;}

Y todos tienen el mismo fondo (b4.jpg). Para .BYIMAG4 has hecho algo parecido, sólo es diferente en active.




Te paso uno de los sitios que hice hace poco como ejemplo:
http://www.cofatuc.org.ar/olimpiadas2011/

Si te fijás tenés 3 botones grandes con un estado inicial. Al mover el mouse por encima de ellos, cambia el color del dibujo y al presionarlo da un efecto de hundido. Esto lo logro con esta imagen:



Y con este código CSS:

Código CSS:
Ver original
  1. #lugares{
  2.     background:url(../images/boton-lugares.png) top left no-repeat;
  3. }
  4. #inscripcion{
  5.     background:url(../images/boton-inscripcion.png) top left no-repeat;
  6. }
  7. #actividades{
  8.     background:url(../images/boton-actividades.png) top left no-repeat;
  9. }
  10.  
  11. #botones a:hover{
  12.     background-position:top center;
  13. }
  14. #botones a:active{
  15.     background-position:top right;
  16. }

Diferentes imagenes para cada botón, pero posicionadas en forma diferente para :hover y :active. :active debe estar siempre después de :hover.

No es complicado, revisá tu CSS porque no es correcto lo que estás haciendo.
  #3 (permalink)  
Antiguo 18/03/2011, 01:11
Avatar de fedefrankk  
Fecha de Ingreso: agosto-2007
Mensajes: 783
Antigüedad: 10 años, 4 meses
Puntos: 7
Pregunta Respuesta: No me funciona :active

Hola, Increible tu explicacion y el tiempo tomado, se agradece y mucho.
(Espectacular tu WEB).. yo estoy iniciando..

Las imagenes de mi codigo son distintas, para cada hover, que en realida son dos estados del boton, el boton es claro (imagen.jpg) y cuando pasas el maus actua el hover (imagen1.jpg).
Mi pregunta es: cuando hago click en ese boton, con active o con otra sentencia, se puede hacer que ese boton quede con imagen1.jpg, osea que quede precionado.
Entonces al hacer clic en otro boton el anterior que vuelva a su estado normal y el nuevo precionado que quede precionado.
Se podra hacer eso con CSS?.

Enserrio muchisimas gracias por tu atencion
Saludos
Fede
  #4 (permalink)  
Antiguo 18/03/2011, 01:21
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 6 años, 9 meses
Puntos: 192
Respuesta: No me funciona :active

Realmente no estoy seguro si eso puede lograrse sólo con CSS (la verdad no se me ocurre como) pero sí con JavaScript (más precisamente, jQuery).

Para esto es necesario definir clases. Algo como:

Código CSS:
Ver original
  1. .activo{
  2.        background-image:url(imagen-de-activo.jpg);
  3. }

Con jQuery uno puede fácilmente agregar y quitar clases a elementos al dispararse diferentes eventos o lo que sea.

Te recomiendo que fusiones tus imágenes (como yo he hecho) pues si usas una imagen diferente para :hover, digamos, ésta recién cargará al momento de pasar el mouse por encima. Esto es algo indeseado, pues uno verá el botón pero al pasar el mouse por encima va a notarse la carga de la otra imagen.

El método que yo terminé adoptando es crear una imagen con los 3 (o dos) estados que tenga mi botón. Cada estado tiene exactamente las mismas dimensiones (fijate en la imagen de arriba) y con CSS puedo re-posicionar el fondo para :hover y :active. De esta forma sólo se carga una sola imagen y el efecto es prolijo.

Te voy a pasar un ejemplo bien sintetizado de cómo lograrías eso que querés hacer con jQuery, pero dame unos minutos :P (tenés suerte que estoy aburrido).
  #5 (permalink)  
Antiguo 18/03/2011, 01:37
Avatar de fedefrankk  
Fecha de Ingreso: agosto-2007
Mensajes: 783
Antigüedad: 10 años, 4 meses
Puntos: 7
Pregunta Respuesta: No me funciona :active

Hola, disculpa las molestias, y gracias.!!!!

Saludos
Fede
  #6 (permalink)  
Antiguo 18/03/2011, 01:39
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 6 años, 9 meses
Puntos: 192
Respuesta: No me funciona :active

Bueno acá está:

http://jsbin.com/axoxu4/4

El botón usa esta imagen para los tres estados:


Si vas al botón "Edit in JS Bin" arriba a la derecha podés ver el código y hacer cambios también.

Este es el html:
Código HTML:
Ver original
  1. <p><a class="boton" href="#"></a></p>
  2.   <p><a class="boton" href="#"></a></p>
  3.   <p><a class="boton" href="#"></a></p>

Este el CSS:
Código CSS:
Ver original
  1. /*estilo para el boton*/
  2.   .boton{
  3.     display:block;
  4.     width:100px;
  5.     height:50px;
  6.     background: url('http://www.freeimagehosting.net/uploads/c3f1b24bbb.jpg') top center no-repeat;
  7.   }
  8.   /*estilo para el hover*/
  9.   .boton:hover{
  10.     background-position: center center;
  11.   }
  12.   /*estilo para la clase activo y para :active*/
  13.   .activo{
  14.     background-position: bottom center;
  15.   }

Acá lo importante: Cuando defino la imagen de fondo, sólo lo hago para el botón al principio, aclarando que su posición debe ser "top center" (la imagen de arriba). Luego, para :hover defino una nueva posición que es "center center" (la del centro) y para el estado activo es "bottom center" (la del fondo).


Y este el código con jQuery:

Código Javascript:
Ver original
  1. <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  2. <meta charset=utf-8 />
  3. <script type="text/javascript">
  4.  $(document).ready(function(){
  5.   //al hacer click en el boton:
  6.   $('.boton').click(function(){
  7.     //quitar la clase .activo al boton que la tenga:
  8.     $('.activo').removeClass('activo');
  9.     //agregar la clase .activo al boton al que hicimos click:
  10.     $(this).addClass('activo');
  11.   });
  12. });
  13. </script>

En este caso definir un estilo para :active no tiene mucho sentido. Adaptar ese código a tus necesidades no debería ser complicado.
  #7 (permalink)  
Antiguo 18/03/2011, 02:02
Avatar de fedefrankk  
Fecha de Ingreso: agosto-2007
Mensajes: 783
Antigüedad: 10 años, 4 meses
Puntos: 7
Pregunta Respuesta: No me funciona :active

Buenas, es justo lo que necesitava.!, muuuy agradecido.!!! por tu tiempo y explicacion.
Se agradece en serio.
Saludos
Fede
  #8 (permalink)  
Antiguo 18/03/2011, 02:14
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 6 años, 9 meses
Puntos: 192
Respuesta: No me funciona :active

No hay problema :)

Recién veo que me olvidé de poner el estado :active! jaja. Debería ser así:

Código CSS:
Ver original
  1. /*estilo para la clase activo y para :active*/
  2.   .boton:active, .activo{
  3.     background-position: bottom center;
  4.   }

Y acá en JS bin para que notes la diferencia:
http://jsbin.com/axoxu4/5

Fijate como cambia justo cuando hacés click.
Un saludo!

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:40.