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 _{（注意伪类）}