[IE7][CSS] 移动的元素保持悬停状态答案

【问题标题】：[IE7][CSS] Moved elements keep their hover state[IE7][CSS] 移动的元素保持悬停状态
【发布时间】：2016-05-30 18:18:08
【问题描述】：

如果我通过 JS 将元素移出光标，该元素将保持悬停状态。我无法在 IE11 或 Chrome 上重现此问题。

function moveElement(e) {
  var first = document.querySelectorAll(".aTab")[0];
  e.parentElement.insertBefore(e, first);
}

#tabBar {
  padding: 10px 10px 10px 10px;
  background-color: rgb(200, 200, 200);
  height: 60px;
}
.aTab {
  float: left;
  width: 30%;
  height: 60px;
  margin: 5px;
  background-color: gray;
  text-align: center;
  font-size: 30px;
}
.aTab:hover {
  background-color: red;
}

<div id="tabBar">
  <div class="aTab" onclick="moveElement(this)">1</div>
  <div class="aTab" onclick="moveElement(this)">2</div>
  <div class="aTab" onclick="moveElement(this)">3</div>
</div>

我该如何解决？

【问题讨论】：

标签： css internet-explorer hover

【解决方案1】：

IE7 不允许您将:hover 伪类应用于非锚元素，除非您明确指定文档类型。只需向您的页面添加一个 doctype 声明，它应该可以完美运行。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

更多关于 IE7/quirks 模式的信息可以在blog post找到。

Ref.

【讨论】：

伪类:hover被考虑在内。问题是如果我在 DOM 中移动元素，IE 不会意识到光标不在项目上。