<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.
Как бы вы побороли это ?
