프론트엔드/CSS

[CSS] 마우스 클릭 금지, 안되게 막기 및 해제

jinwanseo 2021. 4. 17. 10:52
728x90

🤞 CSS 마우스 클릭 금지, 안되게 막기 pointer-events : none;

 

 

  기본 형태

CSS Selector {
    //포인터 안되게 막기 : none 
    pointer-events : none;
}

CSS Selector {
    //포인터 다시 동작 : auto
    pointer-events : auto;
}

  샘플 예제

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>CSS 마우스 클릭 막기/해제</title>
  <style>
    .container-able,
    .container-disable {
      display : inline-block;
      height : 150px;
      width : 150px;
      text-align : center;
      line-height: 150px;
      margin : 10px;
      cursor : pointer;
    }
    
    /* 클릭 영역 */
    .container-disable { 
      /* 클릭 불가능 none */
      pointer-events : none;
      background-color: lightsalmon;
    }
    
    /* 클릭 불가 영역 */
    .container-able {
      /* 클릭 가능 auto (기본설정)*/
      pointer-events : auto;
      background-color: lightgreen;
      
    }
    
  </style>
</head>
<body>
  <div class="container-able">
    클릭 영역
  </div>
  <div class="container-disable">
    클릭 금지 영역
  </div>
</body>
</html>

  출력 결과

 

728x90