Mouseover mouseout на элементе?

<div class="main-image">
	<a target="_blank" onclick="return hs.expand(this)" href="/published/publicdata/AUTO/attachments/SC/products_pictures/HEYNER-Capsula-MN3-Koala-Grey_enl.jpg">
		<img id="img-current_picture" src="/published/publicdata/AUTO/attachments/SC/products_pictures/HEYNER-Capsula-MN3-Koala-Grey_1_enl.jpg">
	</a>
</div>

jsl('#img-current_picture').on('mouseover', function(ev){
	kover=jsl('div').createElement({
		style:'width:100px;height:100px;position:absolute;background:rgba(19,91,158,.3)'
	});
	jsl('.main-image').append(kover);
});
jsl('#img-current_picture').on('mouseout', function(ev){
	jsl('.main-image').remove(kover.a);
});
jsl('#img-current_picture').on('mousemove', function(ev){
	var winCor={
		Xl:ev.offsetX-50,
		Yt:ev.offsetY-50,
		Xr:ev.offsetX+50,
		Yb:ev.offsetY+50
	};
	jsl(kover).css({
		left: winCor.Xl+'px',
		top: winCor.Yt+'px'
	});
});

Примечание: У библиотеки jsl почти такая же логика как и у jquery
Элемент kover то апендится то ремувится если водить курсор над img-current_picture потому что когда он возникает под курсором то для img-current_picture настает mouseout.
Как бы вы побороли это ?