Как отцентрировать «<div>» или сделать так, чтобы курсор не обнаруживал - PullRequest
Новая
       13

Как отцентрировать «<div>» или сделать так, чтобы курсор не обнаруживал

0 голосов
/ 21 марта 2019

Я работаю на домашней странице с полноэкранным фоном, где «частицы» движутся повсюду. Частицы обнаруживают курсор мыши и перемещаются вместе с курсором мыши. Домашняя страница имеет вертикальный центр с логотипом. Проблема возникает, когда курсор мыши находится в центре экрана (вертикально) над элементом div, когда частицы перестают двигаться, и анимация немедленно останавливается. Я хочу решить это, и я думаю, что решение состоит в том, чтобы курсор не определял, когда он находится над этим элементом, или центрировал div. Я не знаю, как это сделать.

Ответы [ 2 ]

0 голосов
/ 21 марта 2019

Я решил это с помощью этого:

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;
}
0 голосов
/ 21 марта 2019

Вот пример блока, прикрепленного к курсору мыши. Он назначает событие 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>
...