CSS：hover打破了IE11中的按钮样式

Question

IE11中按钮的默认样式包括悬停效果 - 悬停时按钮以青色突出显示（确切效果可能与主题有关）。但是，使用:hover伪类添加看似无关的CSS规则会破坏按钮上的悬停突出显示，并且在单击时它们也会出现一些奇怪的行为（单击按钮时似乎应用了悬停突出显示并卡住了）。

我在JSFiddle中有一个简单的测试用例，只有以下HTML，它按预期工作：

<div>
    <button>Prev</button>
    <button>Next</button>
</div>

当将鼠标悬停在＆＃34; Prev＆＃34;按钮：

https://jsfiddle.net/qtsfokmy/

如果我添加以下CSS规则（使用什么类名称，或者它是空的还是实际执行某些操作并不重要），按钮在悬停时不会突出显示，但如果我单击一个按钮，悬停效果似乎卡住了（即点击后没有悬停时按钮仍然突出显示）：

.AnythingYouWant:hover {}

https://jsfiddle.net/vwhurLy4/

我的电脑详情如下：Windows 7 64位SP1，IE11 11.0.9600.18230，Aero主题

我做了一些无效的CSS导致这个，或者这只是一个奇怪的IE11错误？有没有什么办法解决这一问题？ Firefox和Chrome似乎不受:hover CSS规则的困扰。

Answer 1

我想知道是否有办法将默认悬停样式重新应用于按钮，但似乎你甚至不需要走那么远。任何非空的button:hover规则似乎都会修复默认样式（空的规则不会修复此问题），例如此规则实际上并未改变任何内容，但会恢复IE11中的默认悬停效果：

.AnythingYouWant:hover {}
button:hover {
  font-weight: normal;
}

我不确定是否有更好的＆＃34;什么都不做＆＃34;要使用的CSS规则。这是一个小提示，显示＆＃34;修复＆＃34;在行动：

https://jsfiddle.net/xkf5fbLd/