Question

当鼠标移入时，jQuery触发进入输入状态。

$(".test").bind("mouseenter mouseout", function(event) {
  $(this).toggleClass("entered");
  alert("mouse postion (" + event.pageX + "," + event.pageY + ")");
});

.entered {
  font-size: 36px;
  width: 200px;
  height: 100px;
  border: 2px solid black;
}

.test {
  border: 2px solid red;
  background: #fdd;
  width: 60px;
  height: 60px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">please move in</div>

我在代码段中发现了两个问题。

对于输入的状态，仅font-size:36px;生效，为什么width:200px;height:100px;border:2px solid black;无效？
alert在$(this).toggleClass("entered");完成之前弹出，如何使alert在$(this).toggleClass("entered");完成之后执行？

Answer 1

这是因为选择器优先级。 .test是样式表中影响该元素的最后一条规则，它会覆盖以前的样式。要解决此问题，请将.entered规则放在最后，并在其前面加上.test。

这是有关MDN的CSS选择器特异性工作原理的很好指南。
这是因为alert()阻止了UI线程的更新，直到被解雇为止。这是您不应使用它的原因之一。您可以使用setTimeout()调用来延迟alert()，但是更好的方法是只使用console.log()。

还请注意，bind()现在已过时，将从最新版本的jQuery中删除。您应该改用on()。

$(".test").on("mouseenter mouseout", function(event) {
  $(this).toggleClass("entered");
  console.log("mouse postion (" + event.pageX + "," + event.pageY + ")");
});

.test {
  border: 2px solid red;
  background-color: #fdd;
  width: 60px;
  height: 60px;
}

.test.entered {
  font-size: 36px;
  width: 200px;
  height: 100px;
  border: 2px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">please move in</div>

jquery文件中的toggleClass和执行顺序

1 个答案: