css - 魔法与 z-index

Question

好的，我有典型的菜单 ( 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 使用react。伪类。

每个 block 都有 CSS position分配的属性，所以 z-index我希望应该运作良好。

至少，.shadow-bg-white z-index似乎高于 a元素。

您可以推荐什么解决方案？

Answer 1

我认为 Benjam 的总体思路是正确的。我不知道您的最终目的，因此该解决方案可能不适用于您的情况，但没有其他解决方案。您悬停的 li 必须设置得比其他的低，这样其中的 div 就不会与它们重叠。添加这个:

#header-menu ul li:hover {
    z-index: 498; /* one lower than your set z-index for li */
}

参见此处:http://jsfiddle.net/P57yE/8/ .

它向左移动的原因是默认情况下，当元素处于相同的 z-index 时，源顺序中较晚出现的元素优先，所以当你向右移动时，你会向下移动您的 html 源顺序和悬停在具有相同 z-index 的新元素上拾取。但是，当您向左移动时，您将按照 html 源顺序向上移动，因此您悬停在其上的那个优先，并且悬停保持不变。