我有一个由 jQuery 插件生成的进度圆 Canvas ,其中显示了一段包含进度百分比的段落。我想在用户将鼠标悬停在 Canvas 上的任何位置时显示标题,但由于某种原因,当您将鼠标悬停在 Canvas 内显示的段落上时,不会显示标题。这就像段落覆盖了它所在的 Canvas 部分:
我试图为 Canvas 指定一个比段落更大的 z-index
值,但没有成功。
相关生成的 HTML:
<div id="surveyCompletionProgress" class="progressCircle" data-title="hey">
<canvas width="100" height="100" title="hey"></canvas>
<p>0<i>%</i></p>
</div>
相关 CSS:
#surveyCompletionProgress {
width: 100%;
display: block;
margin: 0.5em auto;
line-height: 1.2;
position: relative;
text-align: center;
}
#surveyCompletionProgress canvas {
z-index: 100;
}
#surveyCompletionProgress p {
line-height: 1.2em;
font-size: 2em;
top: 1em;
cursor: default;
position: absolute;
left: 0;
width: 100%;
text-align: center;
z-index: 10;
}
有人知道如何获得所需的行为吗?
最佳答案
It's like the paragraph overlays the part of the canvas it's in
它在 Canvas 上方,因为 z-index 仅适用于定位元素 - 而您的 Canvas 不是,因此您为其指定的 z-index 无效。
添加 position:relative 来定位 Canvas ,然后其较高的 z-index 将起作用:
#surveyCompletionProgress canvas {
position: relative;
z-index: 100;
}
关于css - 如何将 Canvas 覆盖在段落上,以便在将鼠标悬停在整个段落上时显示其标题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39132397/