SO - 18463981

by Arun P Johny

HTML

<div class="a" style="position: relative; left: 0px; top: 0px; width: 80px; height: 90px; border: solid 1px #dddddd;" oncontextmenu="return false;"></div>
<div class="t1" style="position: relative; left: 200px; top: 0px; width: 80px; height: 90px; border: solid transparent 1px;" oncontextmenu="return false;"></div>

JavaScript

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