CSS3의 포인터 이벤트 속성 소개
- 青灯夜游원래의
- 2018-09-25 18:02:372538검색
이 장에서는 CSS3의 매우 실용적인 속성인 CSS3 포인터 이벤트 속성을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
최근에 JavaScript와 관련된 속성인 포인터 이벤트라는 CSS 속성을 발견했습니다. 포인터 이벤트는 값이 없음으로 설정되면 다음과 같은 관련 속성을 갖습니다. 형질.
사용자의 클릭 동작이 효과를 생성하지 못하도록 방지
기본 마우스 포인터 표시 방지
Css의 호버 및 활성 상태 변경이 이벤트를 트리거하지 못하도록 방지
Javascript 클릭으로 트리거되는 이벤트 방지 actions
CSS가 많은 일을 할 수 있다는 것이 놀랍지 않나요? 호환성을 살펴보겠습니다.
IE 11+
Firefox 3.6+
Chrome 4.0+
Safari 6.0
Opera 15.0
iOS Safari 6.0#🎜🎜 #안드로이드 브라우저 2 .1+ #🎜 🎜#Android Chrome 18.0+
렌더링 보기:
<!DOCTYPE html>
<html>
<head>
<style>
a.noLink{pointer-events: none;}
.bottom { background: yellow; width: 100px; height: 100px; }
.top { width: 100px; height: 100px; position: absolute; top: 0; left: 0;background:rgba(0,0,0,.2);}
.top span{margin-top:50px;display:inline-block}
</style>
<script id="jquery_183" type="text/javascript" class="library" src="/js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div>
<!-- 下方div --> <div class="bottom"> <a href="www.baidu.com">bottom-百度</a> </div>
<!-- 上方div --> <div class="top"><span>我是上层top</span></div>
<button id="btnP">
添加pointer-events
</button>
</div>
</body>
<script>
$('#btnP').click(function(){
$('.top').css('pointer-events', 'none')
})
</script>
</html>위는 CSS3 포인터 이벤트 속성을 도입한 예입니다. 직접 컴파일해 보고 효과를 확인해 보세요.
위 내용은 CSS3의 포인터 이벤트 속성 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.