如何在CSS中使用mouseleave?

时间:2019-07-11 23:55:13

标签: jquery html css

它非常适合jQuery,但我想删除jQuery,而仅使用CSS过渡。我想在mouseleave上延迟3秒。如何使用CSS进行这项工作?

var hoverTimeout;
$('#theDiv').hover(function() {
  clearTimeout(hoverTimeout);
  $(this).addClass('hovered');
}, function() {
  var $self = $(this);
  hoverTimeout = setTimeout(function() {
    $self.removeClass('hovered');
  }, 3000);
});
div {
  height: 100px;
  width: 100px;
  background-color: blue;
}

.hovered {
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<div id="theDiv"></div>

1 个答案:

答案 0 :(得分:6)

仅考虑transition-delay处于悬停状态:

div {
  height: 100px;
  width: 100px;
  background-color: blue;
  transition:all 0s 3s;
}

div:hover {
  background-color: red;
  transition:all 0s;
}
<div id="theDiv"></div>