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

【问题标题】：Show/hide a div on onmouseout/onmouseover, but only on top/left/right?在 onmouseout/onmouseover 上显示/隐藏 div，但仅在顶部/左侧/右侧？
【发布时间】：2013-09-06 06:14:57
【问题描述】：

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

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

谢谢！

【问题讨论】：

您能否提供您的代码以及相关代码的 jsFiddle 链接？

标签： html css hover

【解决方案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;
}

【讨论】：