ポインタ属性に関する 6 つの概要を共有します

実はこの属性のことは昔から知っていましたが、勉強したことはありませんでした。今日たまたまTwitterでこの言葉を見かけたので調べてみたところ、たまたま私が抱えていたちょっとした問題が解決したので共有したいと思います。実は、これは比較的単純な CSS3 プロパティです。ポインター属性についての詳細な説明を見てみましょう。

1. CSSのpointer-events属性を使用してマウス貫通効果を実現するためのヒントを共有します

まず、上の写真はSomedong Mallの商品一覧ページにある商品です。右上隅の「Shocking Explosion」は、ラベルによる絶対的な配置であることは誰もが知っています。ラベルは、下の製品画像を覆うことになります。「Amazing Price」画像にマウスを移動すると、そのラベルをクリックすることはできません。もちろん、このアイコンへのリンクを追加することもできます。これにより、問題が解決されます。 (今日はそんな単純なことについて話しているのではありません。続けましょう)

最新のブラウザーにおける CSS と JavaScript の責任範囲は、ますます曖昧で不明確になってきています。たとえば、CSS の -webkit-touch-callout 属性を使用すると、iOS でユーザーがバブル ボックスをクリックしたときにバブル ボックスがポップアップするのを防ぐことができます。この記事で説明するポインタ イベントのスタイルは、次のようなことができます:

1. ユーザーのクリック操作による効果の発生を防止します
2. デフォルトのマウス ポインタの表示を防止します
3. CSS の状態 変更によってトリガーされるイベント
4. JavaScript のクリック アクションがイベントをトリガーしないようにする
1 つの CSS プロパティで非常に多くの機能をすべて実行できます。

2. CSSを使用してマウスを手のスタイルに変更する方法の紹介

自分で設定したpまたはその他のタグで、より良いエクスペリエンスを実現するために、スライドプロセス中にマウスをジェスチャーに変更します

簡単な概要css対応スタイル。

が配置されているpにcursor:pointerを追加するだけです。

3. css_html/css_WEB-ITnose の pointer-events 属性の奇妙な動作について

私の記憶では、pointer-events はイベントの貫通に使用されます。つまり、親要素 If pointer に設定した場合です。 -events:none が設定されている場合、親要素はマウス イベント (タッチ、クリックなどと同様) をリッスンしなくなります。

これを行う必要がある状況は、通常、親レイヤーを「貫通」したい場合で、子要素を直接クリックすると、親要素は何も起こらなかったかのように動作します。これは私のこれまでの知識から収集した情報です。今のところ間違いではないようですが、不完全です。

4. css は要素のマウス イベントをシールドします pointer-events_html/css_WEB-ITnose

// クリックをシールドします

$('body').css('pointer-events','none');

// デフォルトに戻す

$('body').css('pointer-events','auto');

用途: レイヤーをポップアップするとき、または固定するときに設定できます。次の要素のマウス イベントの配置

5. 魔法の CSS 属性 pointer-events_html/css_WEB-ITnose

絶対的に配置された要素がリンクをカバーするか、イベント ハンドルを持つ要素を追加すると、リンクのデフォルトの動作 (ページジャンプ) または要素イベントは発生しません。
Firefox3.6+/Safari4+/Chrome は、pointer-events と呼ばれる CSS 属性をサポートするようになりました。この属性を使用すると、絶対に配置された要素を貫通して次の要素の特定の動作をトリガーできるかどうかを決定できます

6. カーソル マウス スタイル??Attribute_html/css_WEB-ITnose

DIV CSS をレイアウトするとき、マウス ポインタが指の形に変化するなど、オブジェクト内でマウス ポインタ カーソルのコントロールが発生します。次に、マウス ポインタ スタイルのカーソル コントロールを紹介します。システムのデフォルトのマウス ポインタ スタイルに加えて、CSS を介して画像をマウス ポインタとして設定することもできます。もちろん、これはマウス ポインタのさまざまな小さな画像スタイルを設定するためのものです。 CSSカーソル。

ポインター属性に関する質問と回答:

1. css3 ポインターイベントに関する質問: なし。

2. objective-c: 互換性のないブロック ポインター タイプの送信

【関連おすすめ】

1. php.cn Dugu Jiijian (2) - CSS ビデオチュートリアル

2. Css ポインターは、Firefox_Basic チュートリアルで手の形状を表示するコードを制御します

以上がポインタ属性に関する 6 つの概要を共有しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。