Question

我有div这样：

$("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>

我希望当用户点击div，:hover获取禁用时，5秒后再次启用。但在我的代码中它只是停用。如何让它再次激活？

Answer 1

向元素添加一个类，然后删除并添加该元素

＆＃13;

$("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);

});

＆＃13;

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

＆＃13;

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

＆＃13;

如何启用/禁用：使用jquery悬停？

1 个答案: