[SOLVED] How to clear mousemove when leaving ID div using Jquery

How to clear mousemove when leaving ID div using Jquery

Trying to make the hover button disappear when leaving id #2ndCol.

For some reason the hover button is not hiding when mouse hovers over other buttons on home banner.

the dev site is here: http://buildhopedev.wpengine.com/

Tried understanding and looking into this: jquery mousemove how to stop

But still super novice.

<script>
jQuery(function($){
  $('#2ndCol').mousemove(function(event) {
    var left = event.pageX - $(this).offset().left + -75;
    var top = event.pageY - $(this).offset().top + -30;
    $('#button-hover').css({top: top,left: left}).show();
    console.log (left, top);
  });
  $('#2ndCol').mouseleave(function() {
    ('#button-hover').hide();
  });
});
</script>

Would just like the mousemove function to be active only when hovering over the kid (Corin). The column over him is #2ndCol

Solution

That's a strangeness...

Technically, #button-hover is a child of #2ndCol. So while mouse moving "out", the cursor still is over a child... And that bubbles up to the parent.

I suggest you to have #button-hover out of #2ndCol. Now that will "flicker", because for a split second, the mouse will be in/out... To avoid that: Add pointer-events: none to #button-hover.

Okay... But you had a clickable link inside that button, now not listening to pointer events. The solution is to re-think the placement of that link:

<a class="vp-a" href="http://buildhopedev.wpengine.com/wp-content/uploads/2019/04/LandmarkHomes_CureKids_BuildingHope_Small.mp4"><i style="color:#fff" class="far fa-play-circle"></i> <span style="color: #fff;"> WATCH CORINS’S STORY</span></a>

Have the anchor wrapping #2ndCol instead:

<a class="vp-a" href="http://buildhopedev.wpengine.com/wp-content/uploads/2019/04/LandmarkHomes_CureKids_BuildingHope_Small.mp4">
  <div id="2ndCol">
    <!-- and the rest of it's content, without the #hover-button -->
  </div>
</a>

And keep that in the #hover-button (somewhere else in the page):

<i style="color:#fff" class="far fa-play-circle"></i>
<span style="color: #fff;"> WATCH CORINS’S STORY</span>

Finally, here is the event handlers I suggest.
One for mouse in, one for mouse out and one for mouse move.

$("#secondCol").on("mouseenter", function(){
  $('#button-hover').show();
});

$("#secondCol").on("mouseleave", function(){
  $('#button-hover').hide();
});

$("#secondCol").on("mousemove", function(){
  var left = event.pageX - $(this).offset().left + -75;
  var top = event.pageY - $(this).offset().top + -30;
  $('#button-hover').css({top: top,left: left});
  console.log (left, top);
});

So if you followed me... You should now have a "cosmetic" button showing on hover... And the click handled by the "area" div.

That should work better. ;)