Question

我觉得以前一定要问过这个问题，但是我一定不知道找到答案的正确术语。

我有一个transparent div作为命中区域。当用户将鼠标悬停在该区域上时，菜单栏会在屏幕上显示动画。问题是如果光标移动到此菜单，则开始隐藏菜单的动画。它没有意识到光标在它上面。我可以通过使命中区域的z-index高于菜单来解决这个问题，但菜单按钮不能点击。

这是我的代码。有什么想法吗？

http://jsfiddle.net/92dYt/1/

CSS

#menu{
  position:fixed;
  top:-40px;
  left:0px;
  width:100%;
  height:40px;
  background-color:#000;
  z-index:50;
}
#hitarea{
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:150px;
  background-color:#eee;
  z-index:49;
  opacity:0;
}

HTML

<div id="menu"></div>
<div id="hitarea"></div>

JAVASCRIPT

$("#hitarea").hover(
    function () {
        $('#menu').delay(500).animate({
            top: 0
          }, 500, function() {
            // Animation complete.

        }); 
    }, 
  function () {
    $('#menu').delay(500).animate({
        top: -40
      }, 500, function() {
        // Animation complete.

    }); 
  }
);

Answer 1

您可能希望将命中区域作为背景嵌套在菜单中，并使用mouseenter而不是悬停来编码您自己的悬停行为。

http://api.jquery.com/mouseenter/

您可以从示例中看到，当mouseenter仅触发一次时，mouseover将触发每个子对象。（虽然如果嵌套，解决方案也可以使用悬停。）

检测悬停并单击透明div

1 个答案: