CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSポインターイベントプロパティでマウスとタッチを許可するかどうかの制御

CSSのpointer-eventsプロパティを使用して、要素でマウスとタッチを許可するかどうかを制御できます。

CSSポインタイベントプロパティの構文は次のとおりです-

pointer-events: auto|none;

上記、

自動 デフォルトです。要素はポインタイベントに反応しますが、

なし： 要素はポインタイベントに反応しません

例

次の例は、CSSのpointer-eventsプロパティを示しています。

<!DOCTYPE html>
<html>
<head>
<style>
a {
   margin: 10vh;
   pointer-events: none;
}
a:last-of-type {
   pointer-events: auto;
}
</style>
</head>
<body>
<a href=#>No pointer event here</a>
<a href=#>Automatic pointer event here</a>
</body>
</html>

出力

これにより、次の結果が生成されます-

CSSポインターイベントプロパティでマウスとタッチを許可するかどうかの制御

例

<!DOCTYPE html>
<html>
<head>
<style>
select {
   margin: 10vh;
   pointer-events: none;
   background-color: mistyrose;
}
</style>
</head>
<body>
<select>
<option>No event here </option>
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</body>
</html>

出力

これにより、次の結果が生成されます-

CSSポインターイベントプロパティでマウスとタッチを許可するかどうかの制御


  1. CSSポインタ-イベントプロパティ

    pointer-eventsプロパティは、ポインタイベントがトリガーされたときに要素が何らかのアクションを実行するかどうかを指定します。ポインタイベントは、マウスのクリック、タッチ、スタイラスなどでトリガーできます。 以下は、CSSのpointer-eventsプロパティを示すコードです- 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-seri

  2. CSSの外観プロパティを持つカスタムチェックボックス

    外観プロパティを使用して、ユーザーのオペレーティングシステムのプラットフォームネイティブスタイルに従って要素のスタイルを設定します。 構文 CSSの外観プロパティの構文は次のとおりです- Selector {    appearance: /*value*/;    -webkit-appearance: /*value*/; /*for Safari and Chrome */    -moz-appearance: /*value*/; /*for Firefox */ } 例 次の例は、CSSの外観プロパティを示しています。