javascript - 在mouseover和mouseleave事件上触发 Action

我的按钮位于最上方，我希望实现以下目标：


在mouseover的button事件上显示模式。
在模态的mouseleave事件上隐藏该模态。
从顶部，左侧或右侧留下该按钮也会隐藏该按钮
情态的

$(".modal-content1").mouseleave(function() {
  $(this).hide();
  modal.style.display = "none";
});
var modal = document.getElementById('aaa');
var btn = document.getElementById("myBtn");

function fun() {
  modal.style.display = "block";
}
$(function() {
  modal.style.display = "none";
});

window.onclick = function(event) {
  if (event.target !== modal) {

  } else if (event.target !== modal && event.target !== btn) {
    //alert("ggg");
    modal.style.display = "none";
  }


}

.modal-content1 {
  background-color: white;
  margin-left: 100px;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  overflow: auto;
  position: fixed;
  z-index: 5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="myBtn" type="button" class="btn btn-default" style="margin-left: 10px;" onmouseover="fun()"><span class="fa fa-bars"></span>  Services</button>

<div class="modal-content1" id="aaa">
  <h1> ABCDH</h1>
</div>

最佳答案

我从您的代码中编写了一个JSFIDDLE

我认为这是解决方案：

的CSS

.modal-content1 {
    background-color: white;
    margin-left: 100px;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    overflow: auto;
    position: fixed;
    z-index: 5;
    margin-top:10px;
}

html

<button id="myBtn" type="button" class="btn btn-default" style="margin-left: 10px;" onmouseover=""><span class="fa fa-bars"></span>  Services</button>

 <div class="modal-content1" id="aaa">
      <h1>  ABCDH</h1>
    </div>

js / jquery

//hide modal
$('#aaa').hide();

$('#myBtn').mouseover(function(){
    $('#aaa').show();
});

$('#myBtn').mouseleave(function(event){
    //mouseleave button downwards
  if(!(event.pageY > 28 && event.pageY < 32))
  {
        $('#aaa').hide();
  }
});

$('#aaa').mouseleave(function(){
    $('#aaa').hide();
});

链接到jsFiddle：https://jsfiddle.net/yamLxqnm/
如果您有任何疑问，请告诉我:)