2012-01-14 86 views
0

我創建了可摺疊的鏈接來瀏覽我的頁面。我的導航欄中的所有菜單項(垂直,nav div左浮動)也是它們自己的div(對於摺疊是必需的)。每個div都被定義爲一個帶有文本的按鈕。有沒有辦法讓box_shadow效果重疊所有附近的元素?

我用彩色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會崩潰,否則我也會測試它) 。我會在這裏和小提琴上更新CSS,只需一秒鐘。 G'bye克魯夫特...

+0

能否請您創建一個[小提琴](http://jsfiddle.net/)讓我們來看看?此外,您不再需要'border-radius'和'box-shadow'上的供應商前綴。 – 2012-01-14 01:52:54

+0

我已經在Opera,IE,FF和Chrome(最新版本)上測試過它,並且該樣式在沒有供應商前綴的FF或Chrome上似乎不起作用。也許這是我的一個錯誤。我不知道小提琴是什麼(除了小提琴的質樸名稱),但我會研究它。 – 2012-01-14 02:12:41

+0

創建小提琴時,請儘量使其成爲一個簡單的例子;在儘可能小的時候儘可能小,同時還要證明問題。 – 2012-01-14 03:52:32

回答

2

添加z-index超過別人擡高它,position: relative使其使用的z-index。

例如,添加到.mHposition: relative.mH:hoverz-index: 100

最終結果:http://jsfiddle.net/nrkYr/6/

+0

完美!它只是添加了一小部分代碼 - 比添加另一個腳本要好得多。多謝! – 2012-01-14 06:29:17

相關問題