Jak wykonać: aktywną pracę stanu w IE?

Question

Mam przycisk w mojej formie html i muszę zmienić jego obraz tła, gdy zostanie kliknięty przy użyciu css. działa doskonale w FF, ale wydaje się, że IE nie obsługuje stanu :active.

Oto mój kod:

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

To znany błąd występujący w starszych wersjach IE (myślę, że rozwiązał go w IE8) . Zwykle rozwiązuję ten problem (jak również odpowiadający mu problem "hover") przy pomocy javascript. Załączam dwa programy obsługi zdarzeń do elementu - "mousedown", aby ustawić dodatkową klasę (coś podobnego do "button-active") i "mouseup", aby usunąć klasę. W jQuery byłoby coś takiego:

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

Następnie wystarczy dodać tę klasę do reguły CSS, tak jak poniżej:

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

Trochę brzydki, tak, ale czego można się spodziewać - to Internet Explorer. To nie może być piękne.