CSS 테두리 위에 그림자를 설정하는 방법은 무엇입니까?

Question

<div class="row"> 
    some content 

    <div class="info-box"> 
     some other content 
    </div> 
</div> 


.row { 
    float: left; 
    margin-bottom: 1.5%; 
    border: 1px solid #e3e3e3; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    -ms-border-radius: 4px; 
    -o-border-radius: 4px; 
    border-radius: 4px; 
    background-color: rgb(250, 250, 250); 
    width: 685px; 
    -webkit-box-shadow:rgb(153,153,153) 0px 1px 2px 0px; 
    -moz-box-shadow:rgb(153,153,153) 0px 1px 2px 0px; 
    -ms-box-shadow:rgb(153,153,153) 0px 1px 2px 0px; 
    -o-border-box-shadow:rgb(153,153,153) 0px 1px 2px 0px; 
    box-shadow:rgb(153,153,153) 0px 1px 2px 0px; 
} 


.row:hover { 
    background-color: rgb(240, 245, 245); 
    -moz-box-shadow: inset 0 0 5px #4d4d4d; 
    -webkit-box-shadow: inset 0 0 5px #4d4d4d; 
    box-shadow:   inset 0 0 5px #4d4d4d; 

} 

.info-box { 
    position: relative; 
    border-left: 1px solid #e3e3e3; 
    padding: 15px; 
    width: 170px; 
    font-size: 0.93em; 
    color: #363636; 
    float: left; 
} 

좋아요,이 정보 상자는 줄에 있습니다. 왜냐하면 .row : hover에서 내면의 그림자를 만들고 있습니다. 정보 상자의 왼쪽 테두리는 행 위에 마우스를 가져 가면 그림자 위에 표시됩니다.

내 질문은 당신이 국경의 상단에 그림자를 만들 수 있는지입니다. 미리 감사드립니다.

참고 : z- 색인이 나를 위해 작동하지 않습니다.

Answer 1

물론 상단에 있습니다. 즉, 부모가 부모 위에 나타나야합니다. 그렇지 않으면 부모가 숨길 수 있습니다. 원하는 효과를 얻으려면 위에 나온 요소에 그림자를 적용해야합니다 (예 : .info-box). :afterpseudo-element을 사용하면 추가 마크 업없이이 작업을 수행 할 수 있습니다.

this fiddle을 살펴보면 테두리를 의사 요소로 옮기거나 치수를 조정하여 바로 배치 할 수 있지만 기본 제안을 얻었습니다. 내가 무슨 짓을했는지에

기본 가이드 :

1. 그래서 우리는 그것과 관련하여 자녀를 배치 할 수 있습니다 .row CSS를 position: relative했다.
2. .row:hover 규칙의 백그라운드 속성을 제외한 모든 항목을 새로운 .row:hover:after 규칙으로 옮겼습니다.
3. 의사 요소를 강제로 표시하려면 content: ' '이 추가되었습니다.
4. 의사 요소 커버의 너비를 높이기 위해 위치, 높이 및 너비가 추가되었습니다.

편집 : 펠리페 점 시도가 :after 요소에 의해 차단됩니다 .row 내에 이의를 통해 클릭 할 수 있지만,이 문제를 완화하기 위해 pointer-events: none에 pointer events 설정을 사용할 수 있습니다 제안하는 의견에 밖으로 (everything other than IE and Opera). 나는 updated my example to show this in action입니다.