<div>
  <h2 class="findEl">해당 좌표에 위치한 요소는 - <span></span></h2>
  
  <p>이곳으로 마우스를 올려보세요!</p>
  
  <i>mouseover 이벤트가 아닙니다!</i>
  
  <div class="boxList">
    <div class="box red"></div>
    <ul class="box blue"></ul>
    <section class="box green"></section>
  </div>
  
</div>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");

* {
  box-sizing: border-box;  
  font-family: Pretendard;
}

.boxList {
  display: flex;
}

.box {
  width: 70px;
  height: 70px;
  margin: 1.3rem 2rem;
}

.box.red {
  background: red;
}

.box.blue {
  background: blue;
}

.box.green {
  background: green;
}

.findEl {
  font-size: 1.1rem;
}

.findEl span {
  background: #febf00;
}
const findEl = document.querySelector(".findEl span");

window.onmousemove = (event) => {
  const element = document.elementFromPoint(event.clientX, event.clientY);
   
 findEl.innerHTML = element.tagName + " 태그 입니다!";
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.