變化格顏色 - jQuery函數

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/

我要再次添加紅色邊框僅在進入格的情況下，而超時仍然在。 （如果可能的話，請在這種情況下播放聲音，例如aaa.wav）。

我需要保持這種行爲的其餘部分完全如此，這意味着紅色邊框通常應該在超時後變回默認值。

澄清：

超時/延遲被鼠標離開後觸發，並持續1秒鐘。

• 目前的情況：如果你進入前再次1秒到期的股利，超時被刪除，然後又鼠標離開
• 想情況後，再次觸發：如果你進入前再次1秒到期的股利，邊界變得紅，超時被刪除，然後又鼠標離開

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