CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Snorlax
Snorlax

Reputation: 4735

setTimeOut and hover

I was playing around with learning some JavaScript and this small code didn't work for me. If I take out the setTimeout function, the hover works again.

Why doesn't the hover work?

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>

Upvotes: 1

Views: 689

Answers (2)

wwwy
wwwy

Reputation: 109

css priority。 inline style > class style, so, cover

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

Upvotes: 1

The Process
The Process

Reputation: 5953

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

With this line of code, you are adding inline style to the .div, so it has higher specificity.

Try something like this:

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>

Upvotes: 2

Related Questions