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

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 サイトの他の関連記事を参照してください。