クリック不可の機能スタイルを CSS で実装する方法

実装方法: 1. 要素に直接「pointer-events:none;」スタイルを追加し、イベントの発生を禁止し、クリック不可にします。 2. まず「cursor:not-allowed;」スタイルを要素に追加し、次に js コードを使用してクリック イベントがトリガーされないようにし、クリック不能にします。

このチュートリアルの動作環境: Windows 7 システム、CSS3 バージョン、Dell G3 コンピューター。

マウスをクリックできないときのスタイル

cursor:not-allowed;

効果は次のとおりです:

次のようになります。スタイルはクリック可能ではありませんが、クリックすると対応するイベントがトリガーされることに注意してください。

イベントのトリガーを禁止

pointer-events:none;

このスタイルを使用すると、イベントがトリガーされなくなります。マウスは矢印スタイルで表示されます;

これら 2 つのスタイルを同時に使用すると、イベントのトリガーは防止されますが、マウスは無効になりません。希望どおりに無効なスタイルで表示されますが、代わりに矢印スタイルとして表示されます。

したがって、エフェクトを実装するときは、cursor:not-allowed; を使用してから、JS コードを使用してイベントがトリガーされないようにすることができます;

cursor:not-allowed;
pointer-events:none;

(学習ビデオ共有: css ビデオ チュートリアル)

以上がクリック不可の機能スタイルを CSS で実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。