Question

我有全宽滑块，每个图像上都有链接按钮但是当我在第一个滑块锚标签上应用悬停效果时，当它为第二个滑块工作时它不起作用，当我写一个：hover {background：blue;}它不能用于第一个滑块。

这是我的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>

我使用这个滑块 http://tympanus.net/Blueprints/BackgroundSlideshow/

Answer 1

可能是因为你获得了元素的顺序。

尝试如下设置元素。如果您正在尝试按我认为的那样做，图像将覆盖其上方的html，因此悬停效果无法正常工作。

    <li style="background-image: url('images/slides/slide2.jpg'); opacity: 0;"> 
                <img alt="image02" src="images/slides/slide2.jpg">
                <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>
            </li>

Answer 2

试

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

悬停效果对链接内部图像滑块不起作用

2 个答案: