Question

现在我有了这段代码：

$('.a').mouseenter(function(){
    var $this =  $(this);
    clearTimeout($this.data('timerMouseleave'));
    $this.css('border', 'solid 1px #444444')
}).mouseleave(function(){
    var $this =  $(this);
    var timer = setTimeout($.proxy(function(){
        $this.css('border', 'solid 1px #dddddd')
    }, this), 1000)
    $this.data('timerMouseleave', timer)
}).click(function(){
    var $this =  $(this);
    $this.css('border', 'solid 1px black')
    $this.off('mouseenter mouseleave');
})

http://jsfiddle.net/7dXAs/6/

我想在超时仍处于打开状态时再次输入div时添加红色边框。（如果可能的话，请包括在这种情况下播放声音，例如aaa.wav）。

我需要完全保持这种行为的其余部分，这意味着红色边框通常应该在超时后更改回默认值。

澄清：

在mouseleave之后触发超时/延迟并持续1秒。

当前情况：如果您在1秒过期之前再次输入div，则会删除超时，然后在另一次鼠标离开后再次触发
想要的情况：如果你在1秒到期之前再次输入div， border变为红色，超时被删除，然后在另一个mouseleave之后再次触发

Answer 1

尝试

$('.a').mouseenter(function(){
    var $this =  $(this);
    clearTimeout($this.data('timerMouseleave'));
    if($this.hasClass('hide-timer')){
        $this.css('border', 'solid 1px red')
    } else {
        $this.css('border', 'solid 1px #444444')
    }
}).mouseleave(function(){
    var $this =  $(this);
    var timer = setTimeout($.proxy(function(){
        $this.css('border', 'solid 1px #dddddd').removeClass('hide-timer')
    }, this), 1000)
    $this.data('timerMouseleave', timer).addClass('hide-timer')
}).click(function(){
    var $this =  $(this);
    $this.css('border', 'solid 1px black')
    $this.off('mouseenter mouseleave');
})

演示：Fiddle

在超时期间更改mouseenter上的div颜色 - jquery函数

1 个答案: