0

现在我有这个代码：

$('.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）。

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

澄清：

鼠标离开后触发超时/延迟，持续 1 秒。

  • 当前情况：如果您在 1 秒到期之前再次输入 div，超时将被删除，然后在另一次 mouseleave 后再次触发
  • 需要的情况：如果您在 1 秒到期之前再次输入 div，边框变为红色，超时被删除，然后在另一个 mouseleave 后再次触发
4

1 回答 1

0

尝试

$('.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');
})

演示：小提琴

于 2013-08-27T15:23:17.520 回答