Додайте властивість курсора CSS при використанні “pointer-events: none”

Я намагаюся відключити конкретне посилання та застосувати стиль курсору, але ця команда 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 та styled-компоненти, але та ж логіка може бути застосована і до 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 зсередини. (Я використовую це з веб-компонентом material, тому код стає дещо складнішим.)

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

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

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

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

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