要素上のマウスクリックを無効にしながら、カーソルを「テキスト」としてスタイル設定するにはどうすればよいですか?

無効なマウス インタラクションによるカーソル スタイル

CSS プロパティ「pointer-events: none」と「cursor: text」の両方を使用しようとした場合、ユーザーは、無効になっているにもかかわらずカーソルの外観が変更されないという問題に遭遇する可能性があります。これは、「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>

追加の考慮事項:

• IE11 では、疑似要素が必要になる場合があります:

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

• Firefox では、リンク内のテキストにカーソルを直接適用できません。代わりに、疑似要素のアプローチを使用して、カーソル スタイルをコンテナに適用しながらテキストを選択可能にする必要があります。

このアプローチを実装すると、マウスの操作を防ぎながらカーソル プロパティを正常に変更できます。指定された要素を使用します。

以上が要素上のマウスクリックを無効にしながら、カーソルを「テキスト」としてスタイル設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。