在onmouseout / onmouseover上显示/隐藏div，但只在top / left / right上显示/隐藏？

Question

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

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

谢谢！

Answer 1

将元素包含在您想要的任何元素中，使用ul li和div设置为display: none;并li:hover设置为display: block;

Demo

<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;
}