「pointer-events: none」でリンクの対話性を無効にしながらカーソル スタイルを維持する方法

「pointer-events: none」でカーソル スタイルを維持する

「pointer-events: none」を使用してリンクの対話性を無効にすると、次と競合する可能性がありますカーソルのプロパティが変更されます。これは、「pointer-events: none」により、カーソルの変更を含む要素とのすべてのマウス操作が妨げられるためです。

この問題に対処するには、リンク自体ではなく親要素にカーソル プロパティを適用できます。この方法では、リンクの無効な対話機能を維持しながら、カーソルの変更が有効になります。

例:

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

<code class="css">.wrapper {
    position: relative;
    cursor: text;  /* This is used */
}
.wrapper a {
    pointer-events: none;
}</code>

ただし、ブラウザーに特定の矛盾が存在します。 。 IE11 との互換性を確保するには、疑似要素を追加する必要がある場合があります:

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

この疑似要素により、Firefox でのテキスト選択が可能になり、対話機能の無効化を損なうことなく Chrome でのカーソルの変更が可能になります。

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