Question

我创建了一个绝对位置在li里面的弹出窗口。当鼠标放在li或弹出窗口上时，我需要它保持可见。

    <ul>
         <li id="li1">hover menu
                <div class="popupMenu">
                    press here
                </div>  
       </li>
        <li id="li1">hover menu2
                <div class="popupMenu2">
                    press here2
                </div>
        </li>
  </ul>

简单示例：https://jsfiddle.net/vntr8479/2/

这种情况有什么解决方案吗？如何让窗口保持悬停以进行所有过程？

感谢

Answer 1

尝试这样的事情：

$(function(){

    $("#li1").mouseenter(function(){
        $(".popupMenu").fadeIn();
    });

    $(".popupMenu").mouseleave(function(){
        $(".popupMenu").fadeOut();
    });
});

但是只有从光标移动光标（弹出窗口）时，此代码才会隐藏弹出窗口。如果您想要更高级的行为，请尝试添加其他鼠标事件处理程序。

Answer 2

您可以在li上增加mouseenter的高度，以便触及弹出菜单：

$(function(){
  $('#li1')
    .mouseenter(function() {
      $('.popupMenu').fadeIn();
      $(this).css('height', $('.popupMenu').offset().top);
    })
    .mouseleave(function() {
      $('.popupMenu').fadeOut();
      $(this).css('height', '');
    })
});

<强> Working Fiddle #1

<小时/> 的更新

我认为这涵盖了所有情况：

$(function() { $('#li1') .mouseenter(function() { $('.popupMenu').fadeIn(); }) .mouseleave(function(e) { var menu= $('.popupMenu'); if(e.pageY < $(this).offset().top || e.pageY > menu.offset().top + menu.outerHeight() || e.pageX < menu.offset().left || e.pageX > menu.offset().left + menu.outerWidth() ) { $('.popupMenu').fadeOut(); } }) });

Working Fiddle #2

Answer 3

将position: absolute更改为position: relative，以便弹出窗口自动为li元素添加高度。

.popupMenu{width:300px;height:300px;border:1px solid black;position:relative;top:60px;}
ul li{position:relative}
.popupMenu{display:none;}

Answer 4

您应该在具有绝对定位且宽度和高度设置为100％的div中包围列表（这样当您将鼠标水平向右移动时，该框也会消失）。然后，将您的mouseleaave事件移至div，并将fadeout代码作为mouseleave回调函数的一部分。

＆＃13;

$(function() {
  $("#li1").mouseenter(function() {
    $(".popupMenu").fadeIn();
  });
  $("#container").mouseleave(function() {
    $(".popupMenu").fadeOut();
  });
});

＆＃13;

.popupMenu {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  position: absolute;
  top: 60px;
}
ul li {
  position: relative
}
.popupMenu {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" style="display:inline-block; position: absolute; height: 100%;">
  <ul>
    <li id="li1">hover menu
      <div class="popupMenu">press here</div>
    </li>
  </ul>
</div>

＆＃13;

悬停时弹出窗体窗口

4 个答案: