css 및 유사 요소를 사용하여 형제 대상 지정

Question

간단한 단계 양식 스크립트를 작성하려고하는데 툴팁에 맞춤 제목을 사용할 수있는 기능이 필요합니다. 이 작업을 수행하고 도구 설명을 작성한 후 의사 요소 ::를 사용하여 data-title이라는 속성을 작성했습니다. 내가 겪고있는 문제는 위에있는 대신 목록의 다음 형제 뒤에 툴팁이 표시된다는 것입니다. 여기 내 JS-바이올린에 a link는, 그리고 여기에 코드입니다 :

푸

바

물건

foo는 2.0

더

li{ 
list-style:none; 
} 
.step-form{ 
width:90%; 
} 
.step-form li{ 
float: left; 
margin:0 5px; 
text-align: center; 
position: relative; 
z-index:10; 
} 
.step-name{ 
display: table-cell; 
vertical-align: bottom; 
text-align:center; 
margin:0 5px; 
z-index:20; 
} 
.step-num{ 
border: 2px solid #B8B5B5; 
border-radius: 50%; 
width: 15px; 
height: 15px; 
display: inline-block; 
margin:10px 5px; 

} 
.step-num[data-title]:hover:after { 
background: #366F9E; 
border-radius: .5em; 
bottom: 2em; 
color: #fff; 
left: -2.5em; 
content: attr(data-title); 
display: block; 
padding: .3em 1em; 
position: absolute; 
text-shadow: 0 1px 0 #000; 
white-space: nowrap; 
opacity:1; 
z-index: 30; 
} 

나는 가능한 한이 간단하고 가벼운 무게를 만들기 위해 노력하고있어 명심하시기 바랍니다. 감사!

Answer 1

l 요소가 스태킹 컨텍스트를 작성하지 않아야합니다. 그들에 숫자 Z- 인덱스를 설정하지 마십시오, 자동

.step-form li{ 
float: left; 
    margin:0 5px; 
    text-align: center; 
    position: relative; 
    z-index: auto; // change this 
} 

fiddle