Добавить свойство курсора CSS при использовании «события-указателя: нет»

Я пытаюсь отключить конкретную ссылку и применить стиль курсора, но эта команда CSS cursor: text;не действует. Курсор всегда по умолчанию. Я использую последнюю версию Firefox.

CSS:

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

Использование 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;
}

Это довольно давно исходный вопрос, но это мое решение без какого-либо элемента-оболочки и курсора без событий-указателей:

<!-- 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()"Самым быстрым решением будет расфокусировать элемент.
• Вам необходимо предотвратить фокусировку элемента, иначе он может быть активирован клавишей ввода

Указав, pointer-events:noneвы активно заявляете, что между элементом и курсором нет взаимодействия с мышью. Следовательно, у него также не может быть курсора - он невидим для любого поведения мыши.

Доказательства можно найти здесь .

Удалить pointer-events: none !important;. Отключить ссылку с помощью JavaScript:

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

Если вы не знаете, что JavaScript anchorElement- это сам узел или элемент. Самый распространенный способ получить элемент - использовать idатрибут HTML . Допустим, у нас есть:

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

Ваш код может быть:

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

Есть несколько других способов получить Nodes.

Моим вариантом использования был перетаскиваемый элемент, который не мог иметь ни одного события-указателя, ни какого-либо родительского элемента с событием-указателем.

Я решил это, условно применив глобальный стиль, заставляя курсор захвата только при перетаскивании. (Я использую React и стилизованные компоненты, но та же логика может быть применена к vanilla js).

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

// ...

{isDragging && <SetDraggingCursor />}

вы можете создать еще один div и разместить его точно на своем последнем div и создать такой CSS:

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

Вместо обертки это можно сделать с помощью чистого CSS изнутри. (Я использую это с веб-компонентом материала, поэтому код становится немного сложнее.)

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

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

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

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

Я также пытался ::beforeи ::afterс button:disabledнепосредственно, но только не мог заставить это случиться ...