系統城裝機大師 - 唯一官網:www.www.newsthatmovesu.com!

當前位置:首頁 > CMS教程 > 詳細頁面

css如何設置不可點擊的實現方法教程

時間:2022-05-07來源:www.www.newsthatmovesu.com作者:電腦系統城

可以通過設置元素的pointer-events屬性設置為none,來實現元素不可點擊。

此方法是通過設置元素的鼠標事件失效來實現元素不可點擊。

1 pointer-events: none;

CSS pointer-events 屬性定義元素是否對指針事件做出反應。

 

屬性值 描述
auto 默認值。元素對指針事件做出反應,比如 :hover 和 click。
none 元素不對指針事件做出反應。
initial 將此屬性設置為其默認值。參閱 initial。
inherit 從其父元素繼承此屬性。參閱 inherit。

 

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  pointer-events: none;
}
  
div.ex2 {
  pointer-events: auto;
}
</style>
</head>
<body>
  
<h1>pointer-events 屬性</h1>
  
<p>請把鼠標指針移至下面的鏈接,查看是否對指針事件做出反應:</p>
  
<h2>pointer-events: none:</h2>
<div class="ex1">訪問 <a href="https://www.w3school.com.cn/html/">HTML 教程</a></div>
  
<h2>pointer-events: auto(默認)</h2>
<div class="ex2">訪問 <a href="https://www.w3school.com.cn/css/">CSS 教程</a></div>
  
</body>
</html>

注意:

  • pointer-events 的值為 none 時,如果元素上絕對定位,那在它下一層的元素可以被選中。
  • pointer-events: none; 只是用來禁用鼠標的事件,通過其他方式綁定的事件還是會觸發的,比如鍵盤事件等。
  • 如果將一個元素的子元素 pointer-events 設置成其他值(比如:auto),那么當點擊子元素時,還是會通過事件冒泡的形式出發父元素的事件。

到此這篇關于css如何設置不可點擊的實現方法的文章就介紹到這了,更多相關css設置不可點擊內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持腳本之家!

分享到:

相關信息

系統教程欄目

欄目熱門教程

人氣教程排行

站長推薦

熱門系統下載

24小时免费更新在线视频_丝袜放荡妩媚美腿娇妻_99re6这里有精品热视频_国色天香社区论坛