Question

我想创建一个标题，如https://codepen.io/nikspatel/pen/aJGqpv所示。但是，如果我在标题内添加一些文本，例如：

<div id="large-header" class="large-header">
    <h1 style="font-size:150%;">Dummy Text</h1>
    <p style="font-size:100%;">Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text</p>
    <canvas id="demo-canvas" width="1280" height="840"></canvas>
</div>

然后，粒子效果的鼠标悬停被文本抵消。

我应该怎么做才能使悬停效果保持在光标的中心？

Answer 1

您可以尝试在画布上设置位置。

.large-header canvas {
	width: 100%;
	height: 100%;
    position: absolute;
    top: 0;
    left: 0;
 }

Answer 2

这是我的解决方法Codepen

使画布位置绝对。

将此添加到您的CSS

.large-header {
  background: #f58;
  position: relative;
}

.large-header canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;/*to be able to select the text*/
}

文本使画布偏移并影响鼠标悬停位置

2 个答案: