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