css "hover"가 슬라이더에서 작동하지 않습니다.

Question

궤도 슬라이더 안의 호버를 사용하는 데 문제가 있습니다. 전혀 작동하지 않습니다. 내가 뭘 잘못하고 있니? 이 http://jsfiddle.net/Bonomi/KgndE/

HTML :

이

<div class="row"> 
    <div class="large-12"> 
     <ul data-orbit> 
      <li> 
       <img src="http://upload.wikimedia.org/wikipedia/commons/a/a7/Saturn-day-earth-smiled-1000x600.png" alt="slide 1"/> 
       <div class="orbit-caption"> 
       Caption 1 
       </div> 
      </li>    
     </ul> 
     <div class="orbit-caption"> 
     Caption 2 
     </div> 
    </div> 
</div> 

CSS : 사전에

.orbit-caption:hover { 
    background-color: red; 
} 

덕분에

Answer 1

그것은 당신의 선택이 아닌 있기 때문에 여기에

은 코드와 바이올린입니다 충분히 구체적입니다. 시도 :

Updated Example

.row .large-12 .orbit-caption:hover { 
    background-color: red; 
} 

을 내가 CSS specifity (MDN)에보고하는 것이 좋습니다 것입니다.

특이성 값이 20 인 선택기를 사용했지만 덮어 쓰려고 시도한 선택기 : .orbit-container .orbit-slides-container>* .orbit-caption의 특이성은 ~ 30입니다.

선택기 .row .large-12 .orbit-caption:hover는 40_{의 speciity (의사 클래스에주의)}