如何居中“ ” or making the cursor not to detect it

问题描述 投票:-2回答:2

我正在制作一个全屏背景的主页,其中“粒子”随处可见。粒子检测鼠标光标并使用鼠标光标移动。主页有一个带有徽标的垂直居中的div。当鼠标光标位于屏幕中心(垂直方向),在div上方,粒子停止移动并且动画立即停止时,会出现问题。我想要解决这个问题,我认为解决方案是让光标不检测它在该元素上的时间,或者以div为中心。我不知道怎么做。

html cursor center particles
2个回答
0
投票

以下是附加到鼠标光标的块的示例。它将mousemove事件分配给整个文档,而不是特定的div,允许始终跟踪光标,包括在居中的div上。

function moveBlock(event) {
  var block = document.getElementById('block');
  block.style.left = event.clientX + 'px';
  block.style.top = event.clientY + 'px';
}

document.addEventListener('mousemove', moveBlock);
body {
  background-color: #aaa;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#block {
  background-color: red;
  width: 50px;
  height: 50px;
  
  /* This is important, and allows the block to move
  * This is because the top and left style attributes do not work
  * without position being absolute or fixed
  */
  position: absolute; 
}

#coverup {
  background-color: #eee;
  padding: 50px;
  font-size: 5rem;
  font-family: Courier;
  text-align: center;
  width: 50vw;
  height: 50vh;
}
<html>

<body>
  <div id="block"></div>

  <!-- This is the centered div -->
  <div id="coverup">I cover the page</div>
</body>

</html>

0
投票

我用这个解决了它:

HTML

<div id="no-pointer" class="row">

        <div class="col-md-12 col-sm-12">
             <h1>Brand</h1>
             <h4>Slogan</h4>
             <span id="yes-pointer" onclick="openNav()"><a class="smoothScroll btn btn-default">Button</a></span>
        </div>

</div>

CSS

#no-pointer{
  pointer-events: none;
}

#yes-pointer{
  pointer-events: auto;
}
© www.soinside.com 2019 - 2024. All rights reserved.