javascript - 为某个 div 的 onmouseleave 操作添加延迟 - javascript、html、jquery

Question

<div class="container4" style="position: relative; left: 0px; top: 0px; width: 80px; height: 90px; border: solid 1px black;" onmouseenter="this.style.border='solid 3px red';" onmouseleave="this.style.border='solid 1px black';" onclick="this.style.background='rgba(0, 0, 0, 0.5)';" oncontextmenu="return false;"></div>

http://jsfiddle.net/X4NXf/1/

我需要对某一类 div 的 onmouseleave 操作进行简单的延迟。

如果可能，如果您在触发延迟操作之前再次进入 div，则应取消延迟操作，然后在您再次离开 div 后再次开始（延迟从头开始）。

首选的解决方案是 jquery 函数，但我对任何其他方法持开放态度。

Answer 1

试试 jQuery

$('.container4').mouseenter(function(){
    var $this =  $(this);
    clearTimeout($this.data('timerMouseleave'));
    $this.css('border', 'solid 3px red')
}).mouseleave(function(){
    var $this =  $(this);
    var timer = setTimeout($.proxy(function(){
        $this.css('border', 'solid 1px black')
    }, this), 2000)
    $this.data('timerMouseleave', timer)
})

演示：小提琴