겹쳐 질 때 앞면에 겹치는 경계선을 가져 오는 방법은 무엇입니까?

Question

검은 테두리가 1px 인 여러 div가 가로로 나란히 배치되어 있습니다. 그들은 왼쪽/오른쪽 측면에서 중첩됩니다. 요소가 서로 옆에있을 때 테두리가 2 픽셀이되도록 여백을 추가하고 싶지 않습니다.

사용자가 마우스 오버하면 테두리가 흰색으로 바뀝니다. 문제는 두 번째 요소 (첫 번째 요소 다음의 다른 요소)는 이전 요소 뒤에 숨겨진 왼쪽 테두리를 가지며 왼쪽 테두리가 색을 변경하지 않는 것으로 보입니다. 나는 얹은 요소를 위에 올려 놓을 수 있습니까? 나는 전혀 변화가없는 Z- 색인을 시도했다.

.upcoming a:before{ 
    display:block; 
    content:''; 
    position:absolute; 
    width:184px; 
    height:277px; 
    border:1px solid #666; 
} 

.upcoming a:hover:before{ 
    border-color:#CCC; 
} 

(내가 사용하고 있습니다 : 전에 국경 다른 이유 - 중복 상자 그림자) 편집

: 추가 "가을"포스터이 스크린 샷에서 사진

그것이 확대되는 공중 선회한다 꽤 조금 너무. 왼쪽 테두리가 주먹 테두리로 겹쳐져 있기 때문에 더 밝지 않습니다. 당신이 이미 시도했지만

Answer 1

, 나는 z-index 여기에 가장 좋은 방법이라고 생각합니다. 이는 각 요소의 z 위치를 관리 할 수 ​​있도록 설계되었습니다.

예를 들어이 jsfiddle을 참조하십시오 : 아마도 당신은 다른 일을하고 있었다

http://jsfiddle.net/CjYa9/1/

.