「pointer-events：none」を使用するときにCSSカーソルプロパティを追加する

Question 1

特定のリンクを無効にしてカーソルスタイルを適用しようとしていますが、このCSSコマンドcursor: text;は効果がありません。カーソルは常にデフォルトです。Firefoxの最新バージョンを使用しています。

CSS：

pointer-events: none !important;
cursor: text;
color: Blue;

Question 2

を使用pointer-events: noneすると、その要素とのすべてのマウス操作が無効になります。cursorプロパティを変更する場合は、親要素に変更を適用する必要があります。リンクを要素でラップし、cursorプロパティを追加することができます。

ここに例

HTML

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

CSS

.wrapper {
    position: relative;
    cursor: text;  /* This is used */
}
.wrapper a {
    pointer-events: none;
}

ただし、ブラウザの不整合がいくつかあります。IE11でこれを機能させるには、疑似要素が必要なようです。疑似要素を使用すると、FFのテキストを選択することもできます。奇妙なことに、それなしでChromeでテキストを選択できます。

更新された例

.wrapper:after {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
}

Question 3

元の質問からかなり長いですが、これは、ラッピング要素とカーソルがなく、ポインタイベントがない私の解決策です。

<!-- Add tabindex="-1" so that element cannot be reached by keyboard -->
<a href="url" class="disabled" tabindex="-1" onfocus="this.blur()">Disabled link</a>

CSS：

/* Adding cursor just works: */
.disabled {
    cursor: not-allowed;
}

/* Makes link non-clickable: */
.disabled:active {
    pointer-events: none;
}

CodePenの例

編集：

Chromeは、tabindex属性を持つ要素のクリックに焦点を合わせ始めました（tabindex = "-1"でも）。最速の解決策は、onfocus="this.blur()"フォーカスを解除する要素に設定することです。
要素に焦点を合わせないようにする必要があります。そうしないと、Enterキーでアクティブになります。

Question 4

指定するpointer-events:noneことにより、要素とカーソルの間にマウスの相互作用がないことを積極的に宣言します。したがって、カーソルを持つこともできません。すべてのマウスの動作からは見えません。

ここにある証拠。

Question 5

を削除しpointer-events: none !important;ます。JavaScriptを使用してリンクを無効にします。

anchorElement.onclick = function(){
  return false;
}

JavaScriptanchorElementがノードまたは要素そのものであることがわからない場合。要素を取得する最も一般的な方法は、HTMLid属性を使用することです。私たちが持っているとしましょう：

<a id='whatever' href='#'>Text Here</a>

コードは次のようになります。

document.getElementById('whatever').onclick = function(){
  return false;
}

ノードを取得する方法は他にもいくつかあります。

Question 6

私のユースケースは、pointer-eventを持つことも、pointer-eventを持つ親要素を持つこともできないドラッグ可能な要素でした。

ドラッグ中にのみカーソルをつかむように強制するグローバルスタイルを条件付きで適用することで解決しました。（私はReactとstyled-componentsを使用していますが、同じロジックをバニラjsに適用できます）。

const SetDraggingCursor = createGlobalStyle`
  * {
    cursor: grabbing !important;
  }
`;

// ...

{isDragging && <SetDraggingCursor />}

Question 7

別のdivを作成し、それを最後のdivに正確に配置して、次のようなcssを作成できます。

.example{
    background-color: rgba(255, 255, 255, 0); //opacity:0
    z-index: 1;
    cursor: not-allowed;
}

Question 8

ラッパーではなく、内部から純粋なCSSを使用してこれを行うこともできます。（私はこれをマテリアルWebコンポーネントで使用するため、コードはもう少し複雑になります。）

button:disabled {
    > * {
        cursor: not-allowed;
        pointer-events: initial;
    }

    &::before {
        background-color: #fff0;
    }

    &::after {
        background-color: #fff0;
    }
}

<button>
    <svg .../>
</button>

私も試み::beforeと::afterしてbutton:disabled、直接、ちょうどそれを実現することができませんでした...