CSS 박스 섀도우 숨김

Question

에 box-shadow이 있습니다. 불행히도 그림자는 다른 요소에 의해 덮혀 있거나 감춰져 있습니다. z-index 및 positon:relative을 .nav-item에 설정하려고했으나 문제가 해결되지 않았습니다.

내가 잘못하고있는 아이디어가 있습니까? http://higps.org:8000/pitoNew/

Answer 1

좋아, 요소에 너무 많이 섞였습니다. .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

div

시도 CSS 코드 다음 a 태그의 마우스를 가져 가면에서 box-shadow를 제거하고 래퍼의 마우스를 가져 가면에 box shadow를 추가

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

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