图像滑块内链接的悬停效果不起作用答案

【问题标题】：hover effect on link inside image slider not working图像滑块内链接的悬停效果不起作用
【发布时间】：2013-12-12 17:46:26
【问题描述】：

我有全宽滑块，每个图像上都有带有链接的按钮但是当我在第一个滑块锚标记上应用悬停效果时，它在第二个滑块工作时不起作用，当我写 a: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/

【问题讨论】：

你能分享你的链接或制作一个小提琴吗？

标签： css hover slider anchor

【解决方案1】：

试试

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

【讨论】：

【解决方案2】：

可能是因为您获取元素的顺序。

尝试如下设置元素。如果你正在尝试做我认为你是的图像将覆盖它上面的 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>

【讨论】：

您是否制作了链接 display:block 并以正确的高度和宽度定位它，对不起基础知识，我看不到您构建的内容有点困难