javascript - setTimeOut 和悬停

Question

我正在尝试学习一些 JavaScript，但这段小代码对我不起作用。如果我取出 setTimeout 函数，悬停会再次起作用。

为什么悬停不起作用？

https://jsfiddle.net/jzhang172/1n8gqeom/

setTimeout(
function(){
$(".div").css("background","blue");}, 100);

.div{
  background:black;
  height:50px;
  width:50px;
  
}
.div:hover{
  background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div"></div>

Answer 1

$(".div").css("background","blue");}, 100);

通过这行代码，您将内联样式添加到.div，因此它具有更高的特异性。

尝试这样的事情:

setTimeout(
  function() {
    $(".div").addClass('someClass');
  }, 100);

.div {
  background: black;
  height: 50px;
  width: 50px;
}
.div:hover {
  background: red;
}
.someClass {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div"></div>