Question

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

如果我尝试选择文本，则改为选择向左/向右箭头以切换幻灯片。

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

有问题的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。

例如，在CSS中为.tpsliderreel添加一行用于z-index: 99;的行，这应确保该行始终位于任何其他页面元素的顶部。

或者，您可以减少z-index中的.tpslidercontrols（带导航箭头的div），但是这种方法很可能会导致您提出更多问题或将来骇人听闻。情况改变了。

无法单击文本

1 个答案: