How to show a button when hovering over an image?

Question

Google Chrome

There is a task:
Find all the pictures on the page and if the picture meets the conditions, then when you hover over it, you need to show a button in the upper left corner of the picture.
I brought the button, but I didn’t really understand how to process the click.
content.js

function ShowButton(elem){
  elem.wrap("<div class='CheckItLink_Wrap'></div>");
  var parent = elem.parent(".CheckItLink_Wrap");
  parent.append("<span class='CheckItLink_Button'></span>");
  console.log("mouseover");
}

function HideButton(elem){
  elem.parent().children().last().remove();
  elem.unwrap();
  console.log("mouseout");
}

function CheckItLinkClick(th){
  console.log("Click");
}


$(document).ready(function(){

  $(".CheckItLink_Button").on('click', function(){
    CheckItLinkClick(this);
  });

  $("img").hover(
    function() {
      ShowButton($(this));
    },
    function() {
      HideButton($(this));
    }
  );

});

content.css

.CheckItLink_Button{
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  z-index: 9999;
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNvyMY98AAAEFSURBVDhPY6AeyN3Gzlm6eBVH2eL1+DBnyeIVDPX1TFBdCMCfP1+As2zJf2IwQ/1+Fqg2BMBmgFT9yv+itStQxECYaAPSVh79F7f00D90cbwGCFYt+2fev/U/CO+99ezf9muP4XyBymVgwwi6oGD9yX/ffv3+DwNff/76n7XmONwlhL1QuuR/0YaT/6D6UTQTZwAQr7v04N/0I9f/zTl+89/yc3dJM4ALiL1m7YJr8kZigzBRLsCH6WMAR+niL0C6C5h8+zhKl3xFlsNrAFDjZ5BG7uJFYlApBq6S+RIQgxZ/w2kAQ+FKTmD0tfAULRWBimAArpJVEkA17Qyhq5ihQpQCBgYA0VtKVQNRqwQAAAAASUVORK5CYII=);

}

.CheckItLink_Wrap{
  position: relative;
}

When I move the mouse over the button, onmoseout is triggered. What do i do?

Answer 1

Because mouseout fires when hovering over a child element. You can use mouseleave.
www.w3schools.com/jquery/tryit.asp?filename=tryjqu...