使背景雪花元素不可点击

Question

I have added a snowflake effect to my website to make snowflakes fall in the background on the homepage (Got code from https://www.kirupa.com/html5/the_falling_snow_effect.htm ). It works by adding the following block of code:

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

It then styles the '*' to make it look like a snowflake and then sets it to fall in the background. However, my issue is that if you try to click something on my homepage, sometimes a snowflake will fall in front of the curser therefor not allowing the user to select the element of which they are attempting to do.

Is there a way of making it so the falling snowflake doesn't get in the way?

Answer 1

Set the pointer events property on the snowflakes to none.

p.snowflake {
  pointer-events: none;
}

Answer 2

You can add the css property pointer-events: none to your element, which prevents any pointer events from interacting with the element.

Your css selector would now look like this:

.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;
}