Heim >Web-Frontend >CSS-Tutorial >Einführung in die Pointer-Events-Eigenschaft in CSS3
Einführung in die Pointer-Events-Eigenschaft in CSS3
- 青灯夜游Original
- 2018-09-25 18:02:372517Durchsuche
Dieses Kapitel stellt Ihnen ein sehr praktisches Attribut in CSS3 vor: das CSS3-Pointer-Events-Attribut. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
Kürzlich habe ich ein CSS-Attribut namens pointer-events entdeckt, ein Attribut, das sich auf JavaScript bezieht und wörtlich als Zeigerereignis übersetzt wird. Wenn der Wert auf „Keine“ gesetzt ist, weist es die folgenden verwandten Eigenschaften auf.
Verhindern Sie, dass die Klickaktion des Benutzers irgendeine Wirkung erzeugt.
Verhindern Sie die Anzeige des Standardmauszeigers.
Verhindern Sie, dass Hover- und Aktivstatusänderungen in CSS Ereignisse auslösen.
Verhindern Sie, dass Ereignisse durch Javascript-Klickaktionen ausgelöst werden.
Erstens: Ist es nicht erstaunlich, wie viele Dinge man mit CSS machen kann? Werfen wir einen Blick auf die Kompatibilitätssituation.
IE 11+
Firefox 3.6+
Chrome 4.0+
Safari 6.0
Opera 15.0
iOS Safari 6.0
Android Browser 2.1+
Android Chrome 18.0+
Rendering-Ansicht:https://runjs.cn/detail/9rxdbuin
Code:
<!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>Das Obige sind die CSS3-Zeigerereignisse Attribut Es wird ein Beispiel vorgestellt. Sie können versuchen, es selbst zu kompilieren und die Wirkung zu sehen.
Das obige ist der detaillierte Inhalt vonEinführung in die Pointer-Events-Eigenschaft in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!