如何使：IE中的活動狀態工作？

我在我的html表單中有一個按鈕，當用css單擊它時需要更改它的背景圖像。它在FF中完美工作，但似乎IE不支持:active狀態。如何使：IE中的活動狀態工作？

這裏是我的代碼：

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; 
}

來源

2010-10-30 rahim asgari

這是在早期版本的IE瀏覽器的一個已知的bug（我認爲他們解決它在IE8）。我通常用javascript解決這個問題（以及相應的「懸停」問題）。我將兩個事件處理程序附加到元素 - 「mousedown」以設置一個額外的類（類似「button-active」）和「mouseup」來刪除類。在jQuery中它會是這樣的：

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

然後，剛纔那類添加到CSS規則，就像這樣：

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

難看一點，是的，但你所期望的事 - 它是Internet Explorer。它不可能是漂亮的。

來源

2010-10-30 08:25:10

實際上，這個問題通常是爲了「懸停」，其中適當的回調是「mouseover」和「mouseout」。我從來沒有嘗試過它的活躍，所以「mousedown」和「mouseup」可能不是完全正確的事件捕獲 - 但你明白了。 – 2010-10-30 08:26:29

看來，我必須使用JavaScript代碼的目的。 :( – 2010-10-30 09:19:01

我認爲你正在尋找focusin（http://api.jquery.com/focusin/）和focusout（http://api.jquery.com/focusout/）事件。 – AgentConundrum 2010-10-30 09:20:42

如何使：IE中的活動狀態工作？

回答

相關問題