CSS - pointer-events 屬性



CSS pointer-events 屬性用於控制元素如何響應指標事件,例如滑鼠點選、滑鼠懸停和滑鼠移動。它允許您指定元素是否應接收指標事件以及這些事件是否應觸發諸如點選或懸停之類的操作。

可能的值

  • auto −:這是預設值。它表示元素按正常方式執行,並根據其指定的 CSS 屬性和內容響應指標事件。在 SVG 內容中,此值和 visiblePainted 效果相同。

  • none − 此值表示元素不應響應指標事件。點選、懸停效果和其他互動將穿過元素,就好像它不存在一樣,下方的元素將接收這些事件。

  • visiblePainted − 此值表示元素除非在元素的可見已繪製區域上觸發,否則不會接收指標事件。元素內的透明區域不響應指標事件。

  • visibleFill − 與 visiblePainted 類似,此值表示元素僅響應在其可見已繪製區域或元素填充上觸發的指標事件,忽略透明區域上的指標事件。

  • visibleStroke − 與 visiblePaintedvisibleFill 類似,此值表示元素僅響應在其可見已繪製區域或元素描邊上觸發的指標事件,忽略透明區域上的指標事件。

  • visible − 僅當可見性設定為 visible 時才定位指標事件,並且滑鼠游標在其內部(填充)或周長(描邊)上,fillstroke 值不影響事件處理。

  • painted − 此值表示元素僅響應在其已繪製內容上觸發的指標事件。元素內的透明區域不響應指標事件。

  • fill − 與 painted 類似,此值表示元素僅響應在其填充上觸發的指標事件,忽略透明區域上的事件。

  • stroke − 與 paintedfill 類似,此值表示元素僅響應在其描邊上觸發的指標事件,忽略透明區域上的事件。

  • all − 當指標在其內部(填充)或周長(描邊)上時,目標指向指標事件。fillstrokevisibility 屬性值不受影響。

應用於

所有元素。

語法

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>
廣告