使背景雪花元素不可点击

Question

我已在网站上添加了雪花效果，以使雪花落在首页的背景中（来自https://www.kirupa.com/html5/the_falling_snow_effect.htm的Got代码）。通过添加以下代码块，它可以工作：

<div id="snowflakeContainer">
     <p class="snowflake">*</p>
</div>

然后为'*'设置样式，使其看起来像雪花，然后将其设置为落在背景中。但是，我的问题是，如果您尝试单击主页上的某些内容，有时会在光标上方出现雪花，从而导致用户无法选择他们要尝试执行的操作。

有没有办法使落下的雪花不会挡住？

Answer 1

将雪花上的pointer events property设置为无。

p.snowflake {
  pointer-events: none;
}

Answer 2

您可以将css属性pointer-events: none添加到元素中，以防止任何指针事件与元素交互。

您的CSS选择器现在看起来像这样：

.snowflake {
    padding-left: 15px;
    font-family: Cambria, Georgia, serif;
    font-size: 14px;
    line-height: 24px;
    position: fixed;
    color: #FFFFFF;
    user-select: none;
    z-index: 1000;
    pointer-events: none;
}