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添加内联样式，因此它具有更高的特异性。

尝试这样的事情：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

css priority。内联样式＆gt;类风格，所以，封面

.div:hover{
  background:red !important;
}