카테고리 없음

"Javascript Event" 사용하여 hover에 숨겨진 요소 표시하기!(예제)

코비코 koreanvisionarycoder 2022. 11. 11. 01:52

이벤트 : 웹에서 검색 혹은 마우스를 올렸을떄, 카를 입려마우스를 클릭했을 때, 키를 입력했을 때, 특정요소에 포커스가 이동되었을 때 어떤 사건을 발생시키는 것

 

마우스 오버 시 숨겨진 요소를 표시하는 방법

  1. mouseover요소에 EventListener를 추가한다 .
  2. 요소를 가리킬 때마다 의 display속성을 divplay:block 로 설정

예제 활용

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

    <style>
    	 .d-flex{
          flex-direction: column;
          margin-left: 90px;
          width: 286px;
          position: relative;
          padding: 0;
        }

        .dflex .hidden-div{
          display:block;
          width: 100%;
          height:auto;

        }

        .hidden-div{
          background-color: gray;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-wrap: wrap;
          position: absolute;
          width: 100%;
          height: 100%;
          text-align:start;
          padding: 40px;}
    </style>
  </head>

  <body>
<!-- card start -->
  <div id="container"class="d-flex flex-column " >
    <div class="card" style="width: 18rem" >
    <svg 
      class="bd-placeholder-img card-img-top"
      width="100%"
      height="180"
      xmlns="http://www.w3.org/2000/svg"
      role="img"
      aria-label="Placeholder: Image cap"
      preserveAspectRatio="xMidYMid slice"
      focusable="false"
    >
      <title>Placeholder</title>
      <rect width="100%" height="100%" fill="#868e96"></rect>
      <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>0
    </svg>

  </div>
      <div class="hidden-div opacity-75" id="hidden-div">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        </p>
      </div>
</div>


  </body>
</html>
const el = document.getElementById('container');
const hiddenDiv = document.getElementById('hidden-div');


document.getElementById('container').addEventListener('load', function(str){  hiddenDiv.style.display = 'none';
}());

//  Show hidden DIV on hover
el.addEventListener('mouseover', function handleMouseOver() {
  hiddenDiv.style.display = 'block';

  // if you used visibility property to hide div
  // hiddenDiv.style.visibility = 'visible';
});

//  (optionally) Hide DIV on mouse out
el.addEventListener('mouseout', function handleMouseOut() {
  hiddenDiv.style.display = 'none';

  // 👇️ if you used visibility property to hide div
  // hiddenDiv.style.visibility = 'hidden';
});