Try
$('.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');
})
Demo: Fiddle