隐藏CSS盒子的阴影

Question

我的box-shadow在我的.nav-item:hover上。不幸的是，影子正在被其他元素覆盖/隐藏。 我试图在.nav-item上设置z-index和positon:relative，但这并不能解决我的问题。

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

Answer 1

好的，你在元素上混合了太多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属性。

Answer 2

从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; 
    }