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