光标近目标检测

Question

我有以下html：

<style>
   #menu-container
   {
       width: 100%;
       height: 40px;
       // used to detect hover 
   }

   .menu
   {
       border: 1px solid black;
       width: 300px;
       height: 20px;

       margin-top: -100px; // hidden
   }

   .menu-visible
   {
       margin-top: 0px; // visible
   }
</style>

<script>
   $("#menu-container").mouseenter(
       function()
       {
           $(".menu").toggleClass('menu-visible');
       }
   );
</script>

<div id="menu-container">
   <div class="menu">

   </div>
</div>

菜单包装器的高度是+20‘m，这是我正在“检测”运动的额外空间。

目标：当光标靠近菜单时(而不是在菜单上)，菜单必须显示出来。

Problem：一切都很好，除了我不能点击/与菜单容器下的内容交互(额外的20‘t空间)。

有什么建议吗？谢谢!

Answer 1

在没有javascript的情况下，您可以通过执行以下操作来实现相同的目标：

#menu-container {
  width: 100%;
  height: 40px;
  padding: 20px;
}

#menu-container:hover .menu {
  margin-top: 0px; // visible
}

.menu{
  border: 1px solid black;
  width: 300px;
  height: 20px;

  margin-top: -100px; // hidden
}

预览：http://codepen.io/anon/pen/KwRJoQ