CSS3의 포인터 이벤트 속성 소개-CSS 튜토리얼-php.cn

CSS3의 포인터 이벤트 속성 소개

青灯夜游

풀어 주다： 2018-09-25 18:02:37

원래의

2494명이 탐색했습니다.

이 장에서는 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+

렌더링 보기:

https://runjs.cn/detail/9rxdbuin

코드: #🎜 🎜 #

<!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>
    $(&#39;#btnP&#39;).click(function(){
        $(&#39;.top&#39;).css(&#39;pointer-events&#39;, &#39;none&#39;)
    })
</script>
</html>

로그인 후 복사

위는 CSS3 포인터 이벤트 속성을 도입한 예입니다. 직접 컴파일해 보고 효과를 확인해 보세요.

위 내용은 CSS3의 포인터 이벤트 속성 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!