CSS悬停不适用于绝对定位的元素的层次结构

约瑟夫

我正在为一个滑块创建一个小型原型,该滑块可以具有多个场景,并且每个场景可以具有多个带注释的步骤。用户可以在上下拖动鼠标的场景之间切换,也可以通过鼠标滚动在场景的各个步骤之间切换。小型原型的代码(已在Chrome中测试)可以在以下网址找到:http : //jsfiddle.net/eoh59vs8/

HTML:

<div id="storyContainer">
  <div class="sceneContainer">
      <div class="stepContainer">
         <img alt="Scene 1 - Step1" style="background-color: #014CB6"/>
         <a class="annotationPoint" style="top:20px; left:50px">111</a>
         <a class="annotationPoint" style="top:20px; left:120px">112</a>
      </div>
      <div class="stepContainer">
         <img alt="Scene 1 - Step2" style="background-color: #00bfff"/>
         <a class="annotationPoint" style="top:80px; left:50px">121</a>
         <a class="annotationPoint" style="top:80px; left:120px">122</a>
      </div>

      <div class="stepButtonsContainer">
         <span class="stepButton active"></span>
         <span class="stepButton"></span>
      </div>
  </div>
  <div class="sceneContainer">
    <div class="stepContainer">
        <img alt="Scene 2 - Step1" style="background-color: red"/>
        <a class="annotationPoint" style="top:150px; left:150px">211</a>
        <a class="annotationPoint" style="top:180px; left:180px">212</a>
    </div>
 </div>
</div>

CSS:

#storyContainer {
  width: 1031px; height: 580px;
  overflow: hidden;
  position: relative;
}

.sceneContainer {
  border-bottom: solid black thin;
  position: relative;
}

.stepContainer {
  position: absolute;
  opacity: 0;
  top: 0; left:0;
}

.stepContainer:first-of-type {
  opacity:1;
}

.annotationPoint {
  position: absolute;
  display: inline-block;
  width: 40px;
  height: 40px;
}

.annotationPoint:hover {
  cursor: pointer;
  background-color: gold;
}

问题是注释不可悬停。稍微玩一下,似乎问题出在以下事实:批注包含在绝对定位的元素的层次结构中。

我的第一个想法是(因为在其他类似的stackoverflow问题上多次提到),由于存在许多元素彼此堆叠,因此z-index存在一些问题,但是我无法要解决这个问题。

Rhumborl

这是您的CSS #storyContainer .sceneContainer > .stepContainer在这里,您已设置pointer-events: none;,它会禁用div及其子级的鼠标事件因此,这些a元素不会向浏览器触发悬停事件。

如果删除此CSS,它似乎没有任何影响,但是如果需要,则只需要在CSS中将其重置为.annotationPoints和要单击悬停的任何其他元素,例如:

.annotationPoint
{
    pointer-events:initial;
}

更新的小提琴

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章