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
'프론트엔드 > CSS' 카테고리의 다른 글
| [CSS] CSS Selector 선택자 우선순위 (0) | 2021.04.15 |
|---|---|
| [CSS] 폰트 크기 설정 font-size (0) | 2021.04.11 |
| [CSS] border 테두리 속성 설정하기 (0) | 2021.04.06 |
| [CSS] 모서리 모양 변경하기 border-radius (0) | 2021.04.03 |
| [CSS] 배경 색상 변경하기 background color (4) | 2021.04.03 |
댓글