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>

Answer 2

CSS优先内嵌样式>类的风格，所以，覆盖

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