Question

我的目标网页上有一个幻灯片，其中包含指向访问者相应网页的文字和链接。

目标网页链接：http://karenrubkiewicz.com/martin/

第二个框中的黄色箭头应该是可点击的链接，但它没有响应。

这是我的编码：

HTML

<div id="maximage">

<div>
   <img src="images/00_landing page/backgrounds/background_01.jpg" alt="" width="1400" height="1050" />
   <div class="in-slide-content">
   PLACES
   </div>
   <a class="in-slide-content2" href="places.html"><img src="images/arrow.png" height="20px"></a>
</div>

<div>
   <img src="images/00_landing page/backgrounds/background_02.jpg" alt="" width="1400" height="1050" />
   <div class="in-slide-content">
   PLACES
   </div>
   <a class="in-slide-content2" href="places.html"><img src="images/arrow.png" height="20px"></a>
</div>

ETC...

</div> <!--END MAXIMAGE DIV-->

CSS

#maximage {
/* position:fixed !important;*/
display:block;
}

.in-slide-content {
font-family: 'Oswald', sans-serif;
font-size:16pt;
letter-spacing:1px;
position: absolute;
right:63px;
bottom:240px;
width: 220px;
background: rgba(0,0,0,0.8);
color:#FFF;
text-align:center;
text-decoration:none;
padding-top:23px;
padding-bottom:23px;
-webkit-font-smoothing:antialiased;
}

.in-slide-content2{
position: absolute;
right:63px;
bottom:162px;
width: 220px;
background: rgba(0,0,0,0.8);
text-align:center;
padding-top:25px;
padding-bottom:25px;
-webkit-font-smoothing:antialiased;
}

.in-slide-content2 a{
position: relative;
display:block;
}

我正在使用maximage插件，我不确定这是否可能是推理的可能原因。

还有一点需要注意，在我的HTML中，当我删除某个div时，该链接开始起作用，然后我的幻灯片才会崩溃。

实施例

<div id="maximage">

<div> <----REMOVE THIS DIV
<img src="images/00_landing page/backgrounds/background_01.jpg" alt="" width="1400" height="1050" />
 <div class="in-slide-content">
PLACES
</div>
<a class="in-slide-content2" href="places.html"><img src="images/arrow.png" height="20px"></a>
</div> <-----AND REMOVE THIS DIV


 ETC...

</div> <!--END MAXIMAGE DIV-->

我真的坚持这个。提前谢谢！

Answer 1

将其放在CSS中：

#nav {
z-index: 2;
}
body .mc-cycle {
z-index: 0;
}

如果它没有帮助，那么：

#nav {
z-index: 2 !important;
}
body .mc-cycle {
z-index: 0 !important;
}

Answer 2

查看您网站上的代码，（看起来与您在此处发布的内容有所不同），我认为当in-slide-content和in-slide-content2 div被包含在内时，情况会变得复杂将mc-image的背景设置为您的图片文件（而不是使用img标记）。

这是您当前的代码：

<div class="mc-image " ... background-image: url(http://karenrubkiewicz.com/martin/images/00_landing%20page/backgrounds/background_01.jpg);" data-href="">
    <div class="in-slide-content">PLACES</div>
    <a class="in-slide-content2" href="places.html"><img src="images/arrow.png" height="20px"></a>
</div>

尝试将mc-image转换为图片代码，然后从in-slide-content中提取in-slide-content2和maximage。

我认为jsfiddle上的这个实时demo非常类似于你想要做的事情。

在z-index脚本中操纵css属性（图像，锚标记等）的原因可能不会起作用，因为jquery.cycle.all.js脚本分配了所有图像在启动时都具有一些高值z-index，以便它们可以叠加在一起。

// line 295 - 303
// set position and zIndex on all the slides
$slides.css({position: 'absolute', top:0, left:0}).hide().each(function(i) {
    var z;
    if (opts.backwards)
        z = first ? i <= first ? els.length + (i-first) : first-i : els.length-i;
    else
        z = first ? i >= first ? els.length - (i-first) : first-i : els.length-i;
    $(this).css('z-index', z)
});

当脚本循环显示您的图片时，某些代码（我还没弄清楚）还会将该图片的z-index重置为z+1，这样当前图片就会堆叠在其余的。我尝试将一些HTML元素的z-index设置为一些荒谬的高数字，但无济于事。无论如何，我仍然认为解决这个问题最简洁的方法就是看看我分享的小提琴。

超链接没有响应

2 个答案: