CSS - hover box 요소 만들기

parent element에 position : relative 를 주고

child element에 position : absolute와 display : none을 준다.

 

 

혹은,

// html
<div id="parent" class="parent">
  mouse over
  <div id="child" class="child">
    <div>child1</div>
    <div>child2</div>
  </div>
</div>



//js
const parent = document.getElementById("parent")
const child = document.getElementById('child')

function onMouseOver(){   // 마우스가 over 했을 때 hover 생성
  child.style.display = 'block'
}

function onMouseLeave(){   // 마우스가 떠났을 때 hover 제거
  child.style.display = 'none'
}

if(parent){
  parent.addEventListener('mouseover', onMouseOver)
  parent.addEventListener('mouseleave', onMouseLeave)
}

로 JS를 활용해서 만들 수도 있다.