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>

菜单包装器的高度为+ 20px，这是我'检测'运动的额外空间。

目标：当光标靠近菜单（而不是在菜单上方）时，菜单必须显示。

问题：一切都运行良好，但我无法点击/与菜单容器下的内容（额外的20px空间）进行交互。

有什么建议吗？谢谢！

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

光标靠近物体检测

1 个答案: