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

发布于 2024-12-26 12:46:11 字数 1661 浏览 2 评论 0原文

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

我为 :hover 伪元素使用了具有相对较大模糊半径的浅色 box_shadow。现在，当我将鼠标悬停在每个按钮/div 上时，看起来按钮/div 已点亮（很好），并且光线溢出到其上方的按钮/div 上（也很好）。不幸的是，我悬停在其下方的按钮/div 似乎漂浮在照亮的区域上方（不太好）。

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

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

小提琴：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。再见了，粗俗的...

原文

I've created collapsible links for navigating my page. All menu items in my navigation bar (vertical, nav div left floated) are also their own div (necessary for collapsing). Each div is styled as a button with text.

I've used a light colored box_shadow with a relatively large blur radius for the :hover pseudo-element. Now, when I hover over each button/div, it looks like the button/div is lit up (good) and the light spills out over the button/div above it (also good). Unfortunately, the button/div below the one I am hovering over appears to be floating OVER the lit area (not so good).

Is there a way I can get the box_shadow styling to overlap both divs above and below the div the cursor is hovering over? Other links in my site will not be affected, as the styling only applies to the divs and not to the links.

I'm 99% of the way to a perfect (IMO) design, but this one little issue seems to have no answer anywhere in the tutorials I normally use as a reference, or anywhere else for that matter.

Fiddle: http://jsfiddle.net/nrkYr/5/embedded/result/

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

*Update: Needing the vendor prefixes WAS a bug on my end. I downloaded both browsers again and reinstalled, and now box-shadow and border-radius work on all four browsers (Safari just crashes when I navigate away from the default 'buy Apple stuff' page, or else I'd test it, too). I'll update the CSS here and on Fiddle in just a sec. G'bye cruft...

分享到QQ

分享到微博