css - 图像 slider 内链接的悬停效果不起作用

Question

我有全宽 slider ，每个图像上都有带链接的按钮但是当我在第一个 slider anchor 标记上应用悬停效果时它在第二个 slider 上工作时不起作用，当我写 a:hover{background:blue;} 它在第一个 slider 上不起作用。

这是我的html

<ul class="cbp-bislideshow" id="cbp-bislideshow">
                <li style="background-image: url('images/slides/slide1.jpg'); opacity: 1;">
                    <div class="info">
                        <h2>The Real Thing</h2> <label>Quality. Beauty. Durability. Only from </label>
                        <a class="link" title="Get Inspired" href="#"><span>Get Inspired</span></a>
                    </div>
                    <img alt="image01" src="images/slides/slide1.jpg">
                </li>
                <li style="background-image: url('images/slides/slide2.jpg'); opacity: 0;"> 
                    <div class="info">
                        <h2>The Real Thing2</h2> <label>Quality. Beauty. Durability. Only from.</label>
                        <a class="link" title="Get Inspired" href="#"><span>Get Inspired</span></a>
                    </div>
                    <img alt="image02" src="images/slides/slide2.jpg">
                </li>
            </ul>

我用这个 slider http://tympanus.net/Blueprints/BackgroundSlideshow/

Answer 1

尝试

.info{
z-index:999;
position:relative;
}