Question

我创建了可折叠的链接来浏览我的网页。导航栏中的所有菜单项（垂直，导航div左侧浮动）也是他们自己的div（折叠所必需的）。每个div都被设计为带文本的按钮。

我使用了一个浅色的box_shadow，其模糊半径相对较大，用于：hover伪元素。现在，当我将鼠标悬停在每个按钮/ div上时，它看起来像按钮/ div被点亮（好），并且光线溢出其上方的按钮/ div（也很好）。不幸的是，我正在盘旋的那个下方的按钮/ div似乎浮动在点亮的区域（不太好）。

有没有办法可以让box_shadow样式重叠光标悬停在div上方和下方的div？我的网站中的其他链接不会受到影响，因为样式仅适用于div而不适用于链接。

我是完美（IMO）设计的99％，但这个小问题似乎在我通常用作参考的教程中的任何地方都没有答案，或者其他任何地方。

小提琴：http://jsfiddle.net/nrkYr/5/embedded/result/

图片：http://desolosubhumus.webs.com/div%20overlap.jpg

Div CSS：

.mH { cursor: pointer; width: 110px; background-color: #A0522D; color: #000000; font-family: "DreamerOne","sans-serif"; text-shadow: -1px -1px 1px #fc9c47, 1px 1px 1px #fc9c47, 1px 1px 2px #300b00; border: 0 solid #210a02; border-radius: 1em; font-size: 0.9em; font-weight: bold; text-align: center; margin: 1px; box-shadow: inset 0 0 4px 4px #210a02; }

.mH:hover { cursor: pointer; width: 110px; background-color: #F5A77F; font-family: "DreamerOne","sans-serif"; color: #c96914; text-shadow: -1px -1px 1px #210a02, 1px 1px 1px #210a02, 1px 1px 2px #000000; border: 0 solid #876e68; border-radius: 1em; font-size: 0.9em; font-weight: bold; text-align: center; margin: 1px; box-shadow: inset 0 0 4px 4px #432c24, 1px 1px 35px 1px #D87824, -1px -1px 35px 1px #D87824; }

*更新：需要供应商前缀是我的错误。我再次下载了两个浏览器并重新安装，现在所有四个浏览器上都有box-shadow和border-radius工作（当我离开默认的'购买Apple东西'页面时，Safari只会崩溃，否则我也会测试它）。我会在这里和Fiddle更新CSS，只需一秒钟。 G'bye cruft ......

Answer 1

添加z-index以提升其他人，position: relative使其使用z-index。

例如，添加到.mH，position: relative和.mH:hover，z-index: 100。

最终结果：http://jsfiddle.net/nrkYr/6/

有没有办法让box_shadow效果重叠所有附近的元素？

1 个答案: