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/
Thanks in advance
It’s because your selector isn’t specific enough. Try:
I’d suggest looking into CSS specifity (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 ~
.row .large-12 .orbit-caption:hover has a speciity of
40 (note the pseudo class)