css「懸停」不能在滑塊上工作

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（注意僞類）}