リンクのインタラクションを無効にし、「pointer-events: none」でカスタム カーソル スタイルを適用する方法

「pointer-events: none」でリンクとスタイル カーソルを無効にする

リンクを無効にしてカスタム カーソル スタイルを適用しようとすると、 CSS プロパティ「cursor: text」は有効にならない可能性があります。これは、「pointer-events: none」によって要素とのすべてのマウス操作が無効になり、カーソルの変更が妨げられるためです。

この問題を解決するには、カーソル プロパティを無効なリンクに適用するのではなく、親要素に適用します。 。リンクをスパンなどの追加要素でラップすると、親要素の CSS でカーソル プロパティを指定できます。

例

HTML:

<code class="html"><span class="wrapper">
    <a href="#">Some Link</a>
</span></code>

CSS:

<code class="css">.wrapper {
    position: relative;
    cursor: text;  /* Custom cursor property */
}
.wrapper a {
    pointer-events: none;  /* Disable mouse interactions */
}</code>

ブラウザーに特定の矛盾が存在する可能性があることに注意してください。 IE11 との互換性のために、疑似要素が必要になる場合があります。さらに、Firefox では擬似要素によりテキスト選択が可能になりますが、Chrome では擬似要素なしでテキスト選択が可能です。

更新された例 (IE11 互換性):

<code class="css">.wrapper:after {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
}</code>

以上がリンクのインタラクションを無効にし、「pointer-events: none」でカスタム カーソル スタイルを適用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。