CSSの「cursor」プロパティで「pointer-events: none」をオーバーライドする方法は?

DDD
リリース: 2024-11-06 10:01:02
オリジナル
219 人が閲覧しました

How to Override

CSS の「cursor」プロパティによる「pointer-events: none」のオーバーライド

リンクを無効にしてカスタム カーソル スタイルを適用しようとすると、問題が発生する可能性がありますここで、カーソルのプロパティは影響を受けません。これは、要素とのすべてのマウス操作を無効にする「pointer-events: none」の使用が原因で発生します。

この動作をオーバーライドしてカーソル プロパティを変更するには、変更を親要素に適用できます。リンク。以下に例を示します。

HTML

<code class="html"><span class="wrapper">
    <a href="#">Some Link</a>
</span></code>
ログイン後にコピー

CSS

<code class="css">.wrapper {
    position: relative;
    cursor: text;  /* This is used */
}
.wrapper a {
    pointer-events: none;
}</code>
ログイン後にコピー

この手法は、ほとんどのブラウザーで有効です。ただし、古いバージョンの Internet Explorer (IE11) では不整合が発生する可能性があります。ブラウザ間の互換性を確保するために、親要素に疑似要素を追加できます。

<code class="css">.wrapper:after {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
}</code>
ログイン後にコピー

これらの変更により、目的のカーソル スタイルを維持しながらリンクを正常に無効にすることができます。

以上がCSSの「cursor」プロパティで「pointer-events: none」をオーバーライドする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート