隱藏CSS盒子的陰影

我的box-shadow在我的.nav-item:hover上。不幸的是，影子正在被其他元素覆蓋/隱藏。我試圖在.nav-item上設置z-index和positon:relative，但這並不能解決我的問題。隱藏CSS盒子的陰影

任何想法我做錯了什麼？ http://higps.org:8000/pitoNew/

來源

2014-07-18 user2586457

您必須將Z-index屬性設置爲div的，不一個元素。只需添加一些類並將鼠標懸停在div元素上，該元素將設置更高的z-index。 – Kamil

好的，你在元素上混合了太多z-index。你需要在你的.brick課上申請z-index。

#header [class*="brick"] { 
    position: relative; 
} 

#header [class*="brick"]:hover { 
    z-index: 100; 
} 

#header .nav-item { 
    display: block; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    font-size: 19.2px; 
    text-decoration: none; 
} 

#header a.nav-item:hover, 
#header a.nav-item:focus { 
    box-shadow: 0 0 0 8px rgba(255,255,255,0.5); 
    color: #fff; 
}

，並移除.brick DIV中的元素都z-index屬性。

來源

2014-07-18 08:53:27 morkro

-1

從a標籤的鼠標懸停刪除box-shadow並添加box shadow到包裝的鼠標懸停下面的CSS代碼div

嘗試

#header [class*="brick"]{ 
     position: relative; 
    } 

    #header .brick1:hover{ 
     box-shadow: 0 0 0 8px rgba(255,255,255,0.5); 
     z-index: 1010; 
    }

來源

2014-07-18 08:55:59 amol

沒有必要爲元素本身添加'z-index：999;'而不是在懸停時添加更大的值。這只是一個'z-索引'混亂。 – morkro

我剛剛管理他的代碼，因爲那裏已經有很多不同類別的'z-index'應用 – amol

是的，但是這使得他的代碼更難以維護，並且不是一個好的解決方案。從子節點中刪除所有'z-index'屬性可防止他將進入z-index戰爭。 – morkro

隱藏CSS盒子的陰影

回答

相關問題