javascript - 在 mouseover 和 mouseleave 事件上触发操作

Question

我的按钮在最上面，我希望实现以下目标:

1. 在 button 的 mouseover 事件上显示模式。
2. 在模态的 mouseleave 事件中隐藏该模态。
3. 从顶部、左侧或右侧离开该按钮也会隐藏该按钮 模态

$(".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>

Answer 1

我根据你的代码写了一个 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/ 如果您有任何问题，请告诉我:)