[英]css “hover” not working on a slider
I am experiencing an issue using the hover inside the orbit slider, it doesn't work at all. 我在使用轨道滑块内的悬停时遇到问题,它根本不起作用。 What am I doing wrong?
我究竟做错了什么?
Here is the code and the fiddle: http://jsfiddle.net/Bonomi/KgndE/ 这是代码和小提琴: http : //jsfiddle.net/Bonomi/KgndE/
HTML: 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: CSS:
.orbit-caption:hover {
background-color: red;
}
Thanks in advance 提前致谢
It's because your selector isn't specific enough. 这是因为您的选择器不够具体。 Try:
尝试:
.row .large-12 .orbit-caption:hover {
background-color: red;
}
I'd suggest looking into CSS specifity (mdn). 我建议研究CSS特异性(mdn)。
You were using a selector with a specificity value of 20
whereas the selector you were trying to overwrite: .orbit-container .orbit-slides-container>* .orbit-caption
had a specificity of ~ 30
. 你用用的特异性值选择
20
,而选择你试图改写: .orbit-container .orbit-slides-container>* .orbit-caption
具有〜特异性30
。
The selector .row .large-12 .orbit-caption:hover
has a speciity of 40
(note the pseudo class) 选择器
.row .large-12 .orbit-caption:hover
的专一性为40
(请注意伪类)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.