Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

我该如何解决？

Answer 1

除非您明确指定doctype，否则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.

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

1 个答案: