I am trying to make a button disappear when moving my mouse out of a box. However, the button only is disappearing when I move my mouse fast. If I move the mouse slowly out of the box then the button still exists outside the box. How can I fix this?
$('.moveBox').bind('mousemove', function(e) {
$('.moveBut').css({
left: e.pageX + 20,
top: e.pageY + 20
})
})
$('.moveBut').hide();
$('.moveBox').on('mouseenter', function() {
$('.moveBut').show();
});
$('.moveBox').on('mouseleave', function() {
$('.moveBut').hide(10);
});.moveBox {
width: 800px;
height: 200px;
margin: 0;
background-color: pink;
}
.moveBut {
position: absolute;
width: 50px;
height: 50px;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="moveBox">
<button class="moveBut">hello</button>
</div>