如何使 :active 状态在 IE 中工作？答案

【问题标题】：How to make :active state work in IE?如何使 :active 状态在 IE 中工作？
【发布时间】：2010-10-30 08:14:10
【问题描述】：

我的 html 表单中有一个按钮，当使用 css 单击它时需要更改它的背景图像。它在 FF 中完美运行，但似乎 IE 不支持:active 状态。

这是我的代码：

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

【问题讨论】：

标签： html css internet-explorer button

【解决方案1】：

这是 IE 早期版本中的一个已知错误（我认为他们在 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。不会很漂亮。

【讨论】：

实际上，这个问题通常是针对“hover”的，其中适当的回调是针对“mouseover”和“mouseout”。我从来没有尝试过激活它，所以“mousedown”和“mouseup”可能不是要捕获的正确事件——但你明白了。
看来我必须为此目的使用 javascript 代码。 :(
我认为您正在寻找 focusin (api.jquery.com/focusin) 和 focusout (api.jquery.com/focusout) 事件。
很好，只是一些注意事项，您可能需要将mouseleave 事件处理程序添加到按钮，如果mouseup 事件发生在按钮之外，则button-active 类将留在按钮上按钮：$('.button').mouseleave(function() { $(this).removeClass('button-active'); });