jQuery checked attr depends on specific area-CodePudding

I have question about showing popup and hiding on mouseenter and mouseleave events. HTML part of question:

<div id=\"social-wrapper\">
 
  <input type=\"checkbox\" class=\"checkbox\" id=\"share\" />
  <label for=\"share\" class=\"label entypo-export\"><span>share</span></label>
  <div class=\"social\">

    <ul>
      <li>
         <img id=\"linkdln\" src=\"{$linkdln}\" />
      </li>
      <li>
         <img id=\"facebook\" src=\"{$facebook}\" />
      </li>
      <li>
         <img id=\"twitter\" src=\"{$twitter}\" />
      </li>
      <li>
         <img id=\"copy\" src=\"{$copy}\" />
      </li>   
    </ul>

</div>         
</div>

Frontend

Jquery Part

var CHECKBOX = jQuery('input#share');
var mouse_is_inside = false

jQuery('.label').on({
  mouseenter: function () {
    mouse_is_inside = true;
    //$(CHECKBOX).prop("checked", true).trigger("change");
   // console.log('entering!');
  },
  mouseleave: function () {
   // $(CHECKBOX).prop("checked", false).trigger("change");
   // console.log('outside now!');
   mouse_is_inside = false;
  }  
});

I want when user hover the Share button to open popup, that's easy and I achieved that. But problem it's not hiding it. Should be on mouseleave, but if user leaves share button will hive and user will no have opportunity to select social media, so i need to set good condition for hiding it.

if someone can help will be thankful!

CodePudding user response：

You can use CSS for show/hide the social share buttons.

#social-wrapper:hover .social {
    visibility: visible;
    opacity: 1;
    position: relative;
}
#social-wrapper .social {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: -30px;
}