Html css"；悬停“；不使用滑块

我在使用环绕滑块内的悬停时遇到问题，它根本不起作用。 我做错了什么

下面是代码和小提琴：

HTML:

---

提前感谢

这是因为您的选择器不够具体。尝试：

我建议调查一下（mdn）

您使用的选择器的特异性值为

20

，而您试图覆盖的选择器：

.orbit container.orbit slides container>*。orbit caption

的特异性为~

30

---

选择器

.row.large-12.orbit标题：hover

的特殊性为

40

（请注意伪类）

这是因为您的选择器不够具体。尝试：

我建议调查一下（mdn）

您使用的选择器的特异性值为

20

，而您试图覆盖的选择器：

.orbit container.orbit slides container>*。orbit caption

的特异性为~

30

---

选择器

.row.large-12.orbit标题：hover

的特殊性为

40

（注意伪类）

回答得很好！你是如何衡量这种特殊性的？@Bonomi要么手工做（看一看）。或者使用一个计算器像伟大的答案！你是如何衡量这种特殊性的？@Bonomi要么手工做（看一看）。或者使用类似的计算器

<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>

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

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