JS 마우스 다음 팝업 상자를 달성

새로운 하루가 웹 서핑 것은, 빙 검색 페이지에서이 효과를 볼 수 :

마우스의 움직임에 그 팝업 상자와 이동. 인에 대한 생각 :

• 함수 호출으로 onMouseMove 마우스의 현재 위치에 팝업 상자를 제공합니다

  //html
  <div id="alert">
      <div class="img">
          <img src="./img/trees-576751_640.png" alt="">
      </div>
      Look At Me
  </div>
  
  <div id="clickMe">Touch Me</div>

  /*css*/
  #clickMe {
      width: 100px;
      height: 40px;
      margin: 100px auto;
      cursor: pointer;
      background-color: brown;
      color: white;
      text-align: center;
      line-height: 40px;
      border-radius: 50%;
  }
  
  #alert {
      width: 200px;
      height: 200px;
      text-align: center;
      background-color: tomato;
      font-size: 20px;
      position: absolute;
      display: none;
  }
  .img{
      width: 80%;
      height: 35%;
      margin: 20% auto;
      border: 2px dotted #ffffff;
  }
  .img img{
      width: 100%;
      height: 100%;
  }

  //javascript
  var click = document.getElementById("clickMe")
  var alert = document.getElementById("alert")
  
  click.onmousemove = function (e) {
      alert.style.left = e.clientX + 20 + "px"
      alert.style.top = e.clientY + 10 + "px"
      alert.style.display = "block";
  }
  
  click.onmouseout = function (e) {
      alert.style.display = "none";
  }

  결과는 다음과 같습니다 :