CODEWITHSUNDEEP
javascriptjquerycss
leto
leto

Reputation: 599

Prevent Mouseenter and Mouseleave Firing Within Element Without Using Pointer-Events

I'm using 'mouseenter' and 'mouseleave' to change the visibility of an image when I enter and leave an element. My issue is these events keep firing even when I'm within the element. Using 'pointer-events = none' works but it turns off another animation I have on the image. Is there a solution to this that either doesn't use pointer-events nor mousenter/leave and allows me to have animations on my image? DEMO

HTML:

<img id="image" src=""/>
<div id='box' class="box"></div>

CSS:

.box {
    border: 2px solid red;
    height: 400px;
    width: 60%;
    margin: 10px auto;
}

#image {
    position:absolute;
    width: 60px;
    height: 60px;
    display: none;   
}

JS:

$(document).mousemove(function(e){
    const height = $('#image').height() / 2;
    const width = $('#image').width() / 2;
    $("#image").css({
        left:e.pageX-width, 
        top:e.pageY-height
    });
});

$('.box').mouseenter(_=> {
    $('#image').show();
});

$('.box').mouseleave(_=> {
    $('#image').hide();
});

Upvotes: 0

Views: 1299

Answers (2)

Nunchy
Nunchy

Reputation: 948

Have you tried maybe setting a value to indicate the current state of the image?

Something like this:

var showImage = false;

$(document).mousemove(function(e){
    const height = $('#image').height() / 2;
    const width = $('#image').width() / 2;
    $("#image").css({
        left:e.pageX-width, 
        top:e.pageY-height
    });
});

$('.box').mouseenter(_=> {
    if (showImage)
        return;

    showImage = true;
    $('#image').show();
});

$('.box').mouseleave(_=> {
    showImage = false;
    $('#image').hide();
});

Upvotes: 0

Ryan
Ryan

Reputation: 481

I'm not sure if this accomplishes what you're looking for - but you could change the z-index of the image and the background of the parent container, like:

$(document).mousemove(function(e){
    const height = $('#image').height() / 2;
    const width = $('#image').width() / 2;
    $("#image").css({
        left:e.pageX-width, 
        top:e.pageY-height
    });
});

let entries = 0;
let exits = 0

$('.box').mouseenter(_=> {
    $('#image').show();
    entries += 1;
    document.getElementById("entries").textContent=entries;
});
  
$('.box').mouseleave(_=> {
    $('#image').hide();
    exits += 1;
    document.getElementById("exits").textContent=exits;
});
	.box {
    border: 2px solid red;
    height: 400px;
    width: 60%;
    margin: 10px auto;
    background: transparent;
}
#image {
    position:absolute;
    width: 60px;
    height: 60px;
    display: none;
    z-index: -1;  
}

#display {
position: absolute;
top:0;
left: 0;
border: 1px solid black;
width: 100px;
height: 100px;
text-align: center;
   }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image" src="https://i5.walmartimages.ca/images/Large/580/6_r/875806_R.jpg"/>
<div id='box' class="box"></div>
<div id= 'display'>
  <div id= 'entries'>00</div>
  <div id= 'exits'>00</div>
</div>

Which will cause the .box to always be on top, even though the image is under your cursor.

Upvotes: 2

Related Questions