CSS pointer-events屬性用法及代碼示例

此 CSS 屬性指定元素在觸發指針事件時是否顯示某些操作。 pointer-events 由觸摸、手寫筆、鼠標點擊等觸發。

pointer-events 屬性控製 HTML 元素如何響應諸如 CSS 活動/懸停狀態、鼠標/觸摸事件、JavaScript 單擊/點擊事件等事件，還控製光標是否可見。

此屬性的 none 值用於停用單擊目標並允許元素定位該元素下方的任何內容。

用法

pointer-events:none | auto |initial | inherit;

雖然此屬性包括十一個可能的值，但上述語法中給出的值是 HTML 元素的有效值，其他值保留供 SVG 使用。

屬性值

none:此值表示元素不會對指針事件做出反應。它避免了指定 HTML 元素上的所有狀態、單擊和光標選項。

auto:它是默認值。它表示元素必須對指針事件做出反應，例如單擊和：懸停。

讓我們通過一些例子來理解這些值。

示例 - 使用 none 值

在此示例中，我們使用不針對 pointer-events 的 none 值。

<!DOCTYPE html>
<html>
<head>
<title>
pointer-events Property
</title>
<style>
body {
text-align:center;
}
p{
font-size:20px;
pointer-events:none;
}

</style>
</head>
<body>
<CENTER>
<h1> Welcome to the javaTpoint.com  </h1>
<h2> pointer-events:auto; </h2>
<p>
<a href="https://www.javatpoint.com/"> javaTpoint.com </a>
</p>
</body>
</html>

輸出

示例 - 使用自動值

在這裏，我們使用 pointer-events 屬性的自動值，它對 pointer-events 做出反應。

<!DOCTYPE html>
<html>
<head>
<title>
pointer-events Property
</title>
<style>
body {
text-align:center;
}
p{
font-size:20px;
pointer-events:auto;
}

</style>
</head>
<body>
<CENTER>
<h1> Welcome to the javaTpoint.com  </h1>
<h2> pointer-events:auto; </h2>
<p>
<a href="https://www.javatpoint.com/"> javaTpoint.com </a>
</p>
</body>
</html>

輸出

相關用法

注：本文由純淨天空篩選整理自 CSS pointer-events property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。