Wie zu machen: aktiver Zustand Arbeit in IE?

Question

Ich habe eine Schaltfläche in meinem HTML-Formular und muss das Hintergrundbild ändern, wenn es mit CSS geklickt wird. es funktioniert perfekt in FF, aber es scheint, dass IE :active Zustand nicht unterstützt.

Hier ist mein Code:

HTML:

<button class='button'>Click Me</button> 

CSS:

.button { 
    width: 118px; 
    height: 33px; 
    background: url(/images/admin/btn.png) no-repeat center top; 
    border: none; 
    outline: none; 
} 
.button:active { 
    background-position: center bottom; 
} 

Answer 1

Dies ist ein bekannter Fehler in früheren Versionen von IE (ich glaube, sie es in IE8 gelöst) . Normalerweise löse ich dies (sowie das entsprechende "Hover" -Problem) mit Javascript. Ich füge zwei Event-Handler an das Element an - "mousedown", um eine zusätzliche Klasse zu setzen (so etwas wie "button-active") und "mouseup", um die Klasse zu entfernen. In jQuery wäre es so etwas wie dieses:

$('.button').mousedown(function() { $(this).addClass('button-active'); }); 
$('.button').mouseup(function() { $(this).removeClass('button-active'); }); 

Dann fügen Sie einfach die Klasse zu der CSS-Regel wie folgt:

.button:active, .button-active { 
    background-position: center bottom; 
} 

Ein wenig hässlich, ja, aber was tun Sie erwarten - es ist Internet Explorer. Es kann nicht hübsch sein.