Question

它非常适合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>

Answer 1

仅考虑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>

如何在CSS中使用mouseleave？

1 个答案: