我正在为一个滑块创建一个小型原型,该滑块可以具有多个场景,并且每个场景可以具有多个带注释的步骤。用户可以在上下拖动鼠标的场景之间切换,也可以通过鼠标滚动在场景的各个步骤之间切换。小型原型的代码(已在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存在一些问题,但是我无法要解决这个问题。
这是您的CSS #storyContainer .sceneContainer > .stepContainer
。在这里,您已设置pointer-events: none;
,它会禁用div及其子级的鼠标事件。因此,这些a
元素不会向浏览器触发悬停事件。
如果删除此CSS,它似乎没有任何影响,但是如果需要,则只需要在CSS中将其重置为.annotationPoint
s和要单击悬停的任何其他元素,例如:
.annotationPoint
{
pointer-events:initial;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句