Добавить свойство курсора CSS при использовании "pointer-events: none"

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

CSS:

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

Ответ 1

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

Ответ 2

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

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

Ответ 3

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

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

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

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

Код может быть:

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

Существует несколько других способов получения узлов.

Ответ 4

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

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

CSS:

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

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