无法单击文本

Question

我无法在一组分层的<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;
}

Answer 1

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

例如，在.tpsliderreel的CSS中，为z-index: 99;添加一行，以确保它始终位于任何其他页面元素之上。

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