
- CSS 教程
- CSS - 首頁
- CSS - 路線圖
- CSS - 簡介
- CSS - 語法
- CSS - 選擇器
- CSS - 包含
- CSS - 測量單位
- CSS - 顏色
- CSS - 背景
- CSS - 字型
- CSS - 文字
- CSS - 圖片
- CSS - 連結
- CSS - 表格
- CSS - 邊框
- CSS - 塊級邊框
- CSS - 內聯邊框
- CSS - 外邊距
- CSS - 列表
- CSS - 內邊距
- CSS - 游標
- CSS - 輪廓
- CSS - 尺寸
- CSS - 捲軸
- CSS - 內聯塊
- CSS - 下拉選單
- CSS - 可見性
- CSS - 溢位
- CSS - 清除浮動
- CSS - 浮動
- CSS - 箭頭
- CSS - 調整大小
- CSS - 引號
- CSS - 排序
- CSS - 定位
- CSS - 連字元
- CSS - 懸停
- CSS - 顯示
- CSS - 聚焦
- CSS - 縮放
- CSS - 位移
- CSS - 高度
- CSS - 連字元字元
- CSS - 寬度
- CSS - 不透明度
- CSS - z-index
- CSS - 底部
- CSS - 導航欄
- CSS - 覆蓋層
- CSS - 表單
- CSS - 對齊
- CSS - 圖示
- CSS - 圖片庫
- CSS - 註釋
- CSS - 載入器
- CSS - 屬性選擇器
- CSS - 組合器
- CSS - 根元素
- CSS - 盒模型
- CSS - 計數器
- CSS - 剪裁
- CSS - 書寫模式
- CSS - Unicode-bidi
- CSS - min-content
- CSS - all
- CSS - inset
- CSS - isolation
- CSS - overscroll
- CSS - justify-items
- CSS - justify-self
- CSS - tab-size
- CSS - 指標事件
- CSS - place-content
- CSS - place-items
- CSS - place-self
- CSS - max-block-size
- CSS - min-block-size
- CSS - mix-blend-mode
- CSS - max-inline-size
- CSS - min-inline-size
- CSS - offset
- CSS - accent-color
- CSS - user-select
- CSS 高階
- CSS - 網格
- CSS - 網格佈局
- CSS - Flexbox
- CSS - 可見性
- CSS - 定位
- CSS - 層
- CSS - 偽類
- CSS - 偽元素
- CSS - @規則
- CSS - 文字效果
- CSS - 分頁媒體
- CSS - 列印
- CSS - 佈局
- CSS - 驗證
- CSS - 圖片精靈
- CSS - !important
- CSS - 資料型別
- CSS3 教程
- CSS3 - 教程
- CSS - 圓角
- CSS - 邊框圖片
- CSS - 多背景
- CSS - 顏色
- CSS - 漸變
- CSS - 盒陰影
- CSS - box-decoration-break
- CSS - caret-color
- CSS - 文字陰影
- CSS - 文字
- CSS - 2D 變換
- CSS - 3D 變換
- CSS - 過渡
- CSS - 動畫
- CSS - 多列
- CSS - box-sizing
- CSS - 工具提示
- CSS - 按鈕
- CSS - 分頁
- CSS - 變數
- CSS - 媒體查詢
- CSS - 函式
- CSS - 數學函式
- CSS - 遮罩
- CSS - 形狀
- CSS - 樣式圖片
- CSS - 特異性
- CSS - 自定義屬性
- CSS 響應式
- CSS RWD - 簡介
- CSS RWD - 視口
- CSS RWD - 網格檢視
- CSS RWD - 媒體查詢
- CSS RWD - 圖片
- CSS RWD - 影片
- CSS RWD - 框架
- CSS 工具
- CSS - PX 到 EM 轉換器
- CSS - 顏色選擇器和動畫
- CSS 資源
- CSS - 有用資源
- CSS - 討論
CSS - pointer-events 屬性
CSS pointer-events 屬性用於控制元素如何響應指標事件,例如滑鼠點選、滑鼠懸停和滑鼠移動。它允許您指定元素是否應接收指標事件以及這些事件是否應觸發諸如點選或懸停之類的操作。
可能的值
auto −:這是預設值。它表示元素按正常方式執行,並根據其指定的 CSS 屬性和內容響應指標事件。在 SVG 內容中,此值和 visiblePainted 效果相同。
none − 此值表示元素不應響應指標事件。點選、懸停效果和其他互動將穿過元素,就好像它不存在一樣,下方的元素將接收這些事件。
visiblePainted − 此值表示元素除非在元素的可見已繪製區域上觸發,否則不會接收指標事件。元素內的透明區域不響應指標事件。
visibleFill − 與 visiblePainted 類似,此值表示元素僅響應在其可見已繪製區域或元素填充上觸發的指標事件,忽略透明區域上的指標事件。
visibleStroke − 與 visiblePainted 和 visibleFill 類似,此值表示元素僅響應在其可見已繪製區域或元素描邊上觸發的指標事件,忽略透明區域上的指標事件。
visible − 僅當可見性設定為 visible 時才定位指標事件,並且滑鼠游標在其內部(填充)或周長(描邊)上,fill 和 stroke 值不影響事件處理。
painted − 此值表示元素僅響應在其已繪製內容上觸發的指標事件。元素內的透明區域不響應指標事件。
fill − 與 painted 類似,此值表示元素僅響應在其填充上觸發的指標事件,忽略透明區域上的事件。
stroke − 與 painted 和 fill 類似,此值表示元素僅響應在其描邊上觸發的指標事件,忽略透明區域上的事件。
all − 當指標在其內部(填充)或周長(描邊)上時,目標指向指標事件。fill、stroke 和 visibility 屬性值不受影響。
應用於
所有元素。
語法
pointer-event: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all;
要點
如果未定義此屬性,則 SVG 內容具有與 visiblePainted 值相同的屬性。
指標事件中的 none 值不僅使元素成為指標事件的目標,而不是指標事件,而且還允許事件穿過,從而定位元素下方的內容。
使用 pointer-events: none 停用元素上的指標事件並不意味著不會觸發事件監聽器。如果該元素的子元素啟用了 pointer-events 以允許其成為事件目標,則針對子元素的事件將透過父元素傳遞,可能會觸發事件監聽器。但是,如果指標活動僅發生在父元素覆蓋的區域中,則子元素和父元素都將錯過它。
具有 pointer-events: none 的元素仍可以透過 Tab 鍵的順序鍵盤導航獲得焦點。
CSS pointer-events - none 值
以下示例演示了 pointer-events: none 屬性如何停用超連結的點選 −
<html> <head> <style> a[href="https://tutorialspoint_css_pointer-event.com"] { pointer-events: none; } </style> </head> <body> <a href="https://tutorialspoint_css_pointer-event.com">css_pointer-event</a> </body> </html>
CSS pointer-events - auto 值
以下示例演示了 pointer-events: auto 屬性如何允許點選錨元素 −
<html> <head> <style> a[href="https://tutorialspoint_css_pointer-event.com"] { pointer-events: auto; } </style> </head> <body> <a href="https://tutorialspoint_css_pointer-event.com">css_pointer-event</a> </body> </html>
CSS pointer-events - 停用影像上的指標事件
以下示例演示了 pointer-events: none 屬性如何停用影像上的指標事件(點選、懸停等)−
<html> <head> <style> img { height: 100px; width: 100px; pointer-events: none; } </style> </head> <body> <img src="images/pink-flower.jpg" alt="pink-flower"> </body> </html>