CSS Sprites - ¿Cómo dejar botón activable en estado depresivo

Sprites CSS (botón) con tres estados diferentes:CSS Sprites - ¿Cómo dejar botón activable en estado depresivo

estándar
Hover
Presionado (activo)

la actualidad " Trabajo estándar "," Hover "y" Presionado ". El problema es que "Presionado" solo permanece presionado mientras se mantiene presionado el mouse. Me gustaría que el estado "Presionado" o activo permanezca activo hasta que se vuelva a hacer clic. ¿Algunas ideas? Solución de CSS? ¿solución de javascript?

Gracias por su ayuda, D

Aquí está el código:

<html> 

<style type="text/css"> 

    a.button { 
     background-image: url('BUTTON SPRITES IMAGE'); 
     width: 86px; 
     height: 130px; 
     display: block; 
     text-indent: -9999px; 

    } 

    a.micbutton:hover { 
     background-position: 0 -130px; 

    } 

    a.micbutton:active { 
     background-position: 0 -260px; 

    } 

</style> 

<a class="button" href="#" ></a> 

</html>

Fuente

2011-07-25 David J. Phillips

Dejando ': hover' o': active' habilitado después de dejar el elemento o soltar el botón del ratón no es posible con CSS solo. Deberá agregar un evento de clic de JavaScript para mantener el estilo _activo y manejar el _segundo_ clic para deshabilitarlo nuevamente – andyb

Gracias a todos por su ayuda - tremendamente impresionante. Termina siendo un conjunto de nuevas clases CSS y javascript. Este nuevo código permite los 3 estados mencionados anteriormente (Normal, Hover, Presionado). Cuando se vuelve a hacer clic en el estado "Presionado", el botón (sprites) vuelve a aparecer en su estado normal.

Aquí es el código final:

<html> 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 
    $('.button').click(function() { 
    $(this).toggleClass('button').toggleClass('button1').toggleClass('active'); 
}); 
}); 

</script> 

<style type="text/css"> 

a.button { 
    background-image: url('BUTTON SPRITES IMAGE'); 
    width: 86px; 
    height: 130px; 
    display: block; 
    text-indent: -9999px; 

} 

a.button:hover { 
    background-position: 0 -130px; 

} 

a.button:active, a.active { 
    background-position: 0 -260px; 

} 

a.button1:active { 
background-position: 0 -260px; 

} 

</style> 

<a class="button" href="#" ></a> 

</html>

Fuente

2011-07-26 08:38:12

que funcionó para mí también :) gracias –

no hay problema Marci-man :) –

añadir una clase activa:

a.button { 
    background-image: url('BUTTON SPRITES IMAGE'); 
    width: 86px; 
    height: 130px; 
    display: block; 
    text-indent: -9999px; 

} 

a.button:hover { 
    background-position: 0 -130px; 
} 

a.button:active, a.active { 
    background-position: 0 -260px; 
}

Después, cuando el botón está activo sólo tiene que añadir la clase:

<a class="button active" href="#" ></a>

Fuente

2011-07-25 22:56:30 AlienWebguy

Agregar una clase activa era correcta. El uso de la función toggleClass on click agrega la clase activa y elimina la clase con un segundo clic. Esto es lo que estabas después de creer.

Fiddle

$(function() { 
    $('.button').click(function() { 
     $(this).toggleClass('active'); 
    });  
});

Fuente

2011-07-25 23:09:54

+1 para la solución correcta y lo que estaba a punto de escribir :-) – andyb

CSS Sprites - ¿Cómo dejar botón activable en estado depresivo

Respuesta

Cuestiones relacionadas