Tambahkan properti kursor CSS saat menggunakan "pointer-events: none"

Saya mencoba menonaktifkan tautan tertentu dan menerapkan gaya kursor tetapi perintah CSS cursor: text;ini tidak akan berpengaruh. Kursor selalu default. Saya menggunakan versi Firefox terbaru.

CSS:

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

Menggunakan pointer-events: noneakan menonaktifkan semua interaksi mouse dengan elemen itu. Jika Anda ingin mengubah cursorproperti, Anda harus menerapkan perubahan ke elemen induk. Anda bisa membungkus link dengan elemen dan menambahkan cursorproperti ke dalamnya.

Contoh Disini

HTML

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

CSS

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

Namun, ada beberapa inkonsistensi browser. Untuk membuat ini berfungsi di IE11, sepertinya Anda membutuhkan elemen pseudo. Elemen pseudo juga memungkinkan Anda memilih teks di FF. Anehnya, Anda dapat memilih teks di Chrome tanpa itu.

Contoh yang Diperbarui

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

Ini cukup lama sejak pertanyaan asli, tetapi ini adalah solusi saya tanpa elemen pembungkus dan kursor tanpa peristiwa penunjuk:

<!-- 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;
}

Contoh CodePen

EDIT:

• Chrome telah mulai menambahkan fokus pada klik pada elemen dengan atribut tabindex (bahkan dengan tabindex = "- 1"). Solusi tercepat adalah mengatur onfocus="this.blur()"ke elemen tidak fokus.
• Anda perlu mencegah pemfokusan elemen, jika tidak maka dapat diaktifkan dengan tombol enter

Dengan menentukan pointer-events:noneAnda secara aktif menyatakan bahwa tidak ada interaksi mouse antara elemen dan kursor. Oleh karena itu, ia juga tidak dapat memiliki kursor - ia tidak terlihat oleh semua perilaku mouse.

Bukti dapat ditemukan di sini .

Hapus pointer-events: none !important;. Nonaktifkan tautan menggunakan JavaScript:

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

Jika Anda tidak tahu JavaScript anchorElementadalah Node atau Elemen itu sendiri. Cara paling umum untuk mendapatkan Elemen adalah dengan menggunakan idatribut HTML . Katakanlah kita memiliki:

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

Kode Anda bisa jadi:

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

Ada beberapa cara lain untuk mendapatkan Node.

Kasus penggunaan saya adalah elemen yang dapat diseret yang tidak dapat memiliki peristiwa penunjuk atau elemen induk dengan peristiwa penunjuk.

Saya menyelesaikannya dengan menerapkan gaya global secara kondisional yang memaksa kursor meraih hanya saat menyeret. (Saya menggunakan React dan komponen bergaya, tetapi logika yang sama dapat diterapkan pada vanilla js).

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

// ...

{isDragging && <SetDraggingCursor />}

Anda dapat membuat div lain dan memposisikannya tepat di div terakhir Anda dan membuat css seperti ini:

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

Daripada membungkus, ini juga dapat dilakukan dengan CSS murni dari bagian dalam. (Saya menggunakan ini dengan komponen web material, sehingga kodenya menjadi sedikit lebih kompleks.)

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

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

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

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

Saya juga mencoba ::beforedan ::afterdengan button:disabledlangsung, tetapi tidak bisa mewujudkannya ...