好的，我有典型的菜单（ul>li>a）。任务是将背景<div>（阴影，渐变等）绘制到<li>元素（ul>li>.shadow-bg-white）中
（例如，div是绿色边框。所有其他边框只是为了更好地查看问题）
http://jsfiddle.net/voilalal/P57yE/embedded/result/或http://jsfiddle.net/voilalal/P57yE/6/ （例如，div以绿色为边界）
如果我将物品从左到右悬停在上面，一切都还可以。但是，如果我将鼠标悬停在从右到左的项目上，则左侧的项目不会对:hover伪类做出反应。
每个块都分配了CSS position属性，因此我希望z-index能够正常运行。
至少，.shadow-bg-white z-index似乎高于a项目。
您可以推荐什么解决方案？
答案 0 :(得分：2)
我认为Benjam处于一般的正确轨道上。我不知道你的最终目的，所以解决方案可能不适用于你的情况，但没有其他解决方案。您悬停在的li必须设置为低于其他div，因此其中的#header-menu ul li:hover {
z-index: 498; /* one lower than your set z-index for li */
}
不会与它们重叠。添加这个：
z-index见这里：http://jsfiddle.net/P57yE/8/。
它继续工作的原因是，默认情况下，当项目处于同一个z-index时，源顺序中稍后出现的项目优先，因此当您向右移动时，您将在html源顺序中向下移动使用相同的{{1}}在新元素上拾取悬停。但是当你向左移动时，你就会按照html源顺序进行操作，这样你所盘旋的那个优先，悬停仍然存在。
答案 1 :(得分：1)
他们没有反应，因为他们被div所覆盖，因此div正在从其下方的任何东西中偷窃。
如果div不需要覆盖所有LI，您可能希望将它放在带有z-index的LI下面。但我不确定你到底想要做什么，所以我不确定这个解决方案是否适合你。