3

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?

Shafizadeh
  • 9,960
  • 12
  • 52
  • 89
  • 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 Feb 07 '16 at 19:52
  • Related: [Can I disable a CSS :hover effect via JavaScript?](http://stackoverflow.com/questions/2754546/can-i-disable-a-css-hover-effect-via-javascript) – Michał Perłakowski Feb 07 '16 at 19:58

1 Answers1

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>
adeneo
  • 312,895
  • 29
  • 395
  • 388