Question

我的按钮位于顶部，我希望实现以下目标：

在mouseover的{{1}}事件中显示模式。
在模式的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;
}

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/ 如果您有任何疑问，请告诉我：）

对mouseover和mouseleave事件的触发操作

1 个答案: