진스
z-index position div 겹친 영역 이벤트 처리 본문
728x90
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<script src="jquery.js"></script>
<style>
.wrapper {
width: 400px;
height: 400px;
border: 1px solid #000;
position: relative;
}
.box {
width: 200px;
height: 200px;
border: 1px solid #000;
position: absolute;
}
.box1 {
top:10px;
left: 10px;
background: pink;
}
.box2 {
background: gold;
top:100px;
left: 100px;
opacity: .8;
/* z-index를 무시하고 겹쳐있는 영역을 클릭했을때 box1 요소에 click 이벤트 반응하게 하기 */
pointer-events: none; /* HTML 요소에 정의된 이벤트( click, hover, drag, active...등 )를 비활성화한다. */
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
</div>
<script>
$(".box1").click(function(event) {
console.log("box1"); // 겹쳐진 영역을 클릭해도 box1요소의 이벤트가 반응한다.
});
</script>
</body>
</html>정리
위를 덮고 있는 영역에 아래만 추가하면 됨
pointer-events: none;
728x90
'Css' 카테고리의 다른 글
| CSS 만으로 슬라이드 만들기 (0) | 2022.05.10 |
|---|---|
| css로 모바일과 pc 구분하기 (0) | 2022.05.10 |
| img와img 사이가 떨어질때 (0) | 2021.10.18 |
| ios 아이폰 css 처리 (safeare,input등) (0) | 2021.10.18 |
| ios 회전시 글꼴 변경 방지 (0) | 2021.08.02 |
'Css' Related Articles
more
Comments