css "hover" not working on a slider

Question

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/

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

Thanks in advance

Answer 1

It's because your selector isn't specific enough. Try:

Updated Example

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

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 ~ 30.

The selector .row .large-12 .orbit-caption:hover has a speciity of 40 _{(note the pseudo class)}