时间戳

首页 > 解决方案 > 无法点击文字

html - 无法点击文字

问题描述

我无法单击一组分层<div>s 中幻灯片的文本。

如果我尝试选择文本，我会选择左/右箭头来切换幻灯片。

但是我无法做到，因此可以突出显示文本。主要原因是我需要在最后一张幻灯片上有一个超链接。

有问题的 HTML 的简化版本如下：

<div class="tpslider">
  <div class="tpsliderreel">
    <div class="tpslidercell">Text content</div>
    <div class="tpslidercell">Text content</div>
    <div class="tpslidercell">Text content</div>
  </div>
  <div class="tpslidercontrols">
    <div class="tpcontrolcell">Left arrow HTML</div>
    <div class="tpcontrolcell">Right arrow HTML</div>
  </div>
</div>

相关CSS如下：

.tpsliderreel {
    height: inherit;
    width: 1000%;
    position: absolute;
 transition: .75s ease-in-out;
}
.tpslidercontrols {
    height: inherit;
    width: 1000%;
    position: absolute;
}
.tpslidercell {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    width: 8%;
    margin: 0 1%;
    font-size: 1rem;
}
.tpcontrolcell {
    display: inline-block;
    vertical-align: middle;
    width: 10%;
    height: inherit;
    position: relative;
}

标签： htmlcss

解决方案

您的问题似乎是简单的 Z 索引问题。您有宽度为 1000% 的左/右导航按钮位于您希望选择的文本之上。解决此问题的最简单方法是增加文本 div 的 z-index。

例如，在您的 CSS for 中.tpsliderreel，添加一条线，z-index: 99;以确保它始终位于任何其他页面元素的顶部。

或者，您可以减少z-indexof .tpslidercontrols（带有导航箭头的 div），但这种方法更有可能导致您在未来发生变化时提出更多问题或将事情搞砸。

推荐阅读