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

這是因為您的選擇器不夠具體。 嘗試：

更新示例

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

我建議研究CSS特異性（mdn）。

你用用的特異性值選擇20 ，而選擇你試圖改寫： .orbit-container .orbit-slides-container>* .orbit-caption具有〜特異性30 。

選擇器.row .large-12 .orbit-caption:hover的專一性為40 _{（請注意偽類）}