How to enable/disable :hover using jquery? [duplicate]

Question

I have a div like this:

$("div").on("click", function(){

  $("div").css({"background-color":"#f1f1f1"});
  $("div").text('Sending ... (I want diactivate :hover)');
  setTimeout(function(){
    $("div").text('Click (I want activate :hover again)');
    $("div").hover(function(e) {
        $(this).css("background-color","#ddd8")
    });
  }, 5000);
  
});

div{
 padding: 20px;
  border: 1px solid #999;
  text-align: center;
  background-color: #f1f1f1;
  cursor: pointer;
}

div:hover{
  background-color: #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Click (I want activate :hover)</div>

I want when user clicks on that div, :hover get disable and after 5sec it get enable again. But in my code it just deactivate. How can I make it activate again?

You'd have to do $(this).removeAttr('style') and remove the inline style so it no longer overrides the stylesheet, but all of this is really a bad idea, and probably not the way you should be doing it. — adeneo
– adeneo, Commented Feb 7, 2016 at 19:52

adeneo · Accepted Answer · 2016-02-07 19:55:08Z

2

Add a class to the element, and remove and add that instead

$("div").on("click", function() {

  $(this).toggleClass('bg hover')
         .text('Sending ... (I want diactivate :hover)');

  setTimeout(function() {
    $(this).toggleClass('bg hover')
           .text('Click (I want activate :hover again)');
  }.bind(this), 1000);

});

div {
  padding: 20px;
  border: 1px solid #999;
  text-align: center;
  background-color: #f1f1f1;
  cursor: pointer;
}
div.bg {
  background: red;
}
div.hover:hover {
  background-color: #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hover">Click (I want activate :hover)</div>

answered Feb 7, 2016 at 19:55

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to enable/disable :hover using jquery? [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related