html - 在 onmouseout/onmouseover 上显示/隐藏 div，但仅在顶部/左侧/右侧？

Question

有没有办法识别鼠标在元素上的移动位置？我有一个 div，我在菜单项 (li) 的 onmouseover 和 onmouseout 上显示或隐藏它。因此，当用户将鼠标移到菜单项上时，会显示 div。当用户将鼠标向左、向右或顶部移动菜单项时，div 被隐藏。只有当用户向下移动鼠标时，div 才不应该被隐藏，因为用户应该能够点击 div 的内容。

有解决这些问题的标准方法吗？

谢谢！

Answer 1

将元素包裹在您想要、正在使用、正在设置的任何元素中，ul li以及div正在display: none;将li:hover其设置为display: block;

演示

<div class="wrap">
    <ul>
        <li>A <div>Show A Content</div></li>
        <li>B <div>Show B Content</div></li>
        <li>C <div>Show C Content</div></li>
    </ul>
</div>

.wrap ul li div {
    display: none;
}

.wrap ul li:hover div {
    display: block;
}