Как я могу изменить курсор для отключенного <button>или <a>в Bootstrap 4?

Question

Как использовать курсор : не разрешено вкл. кнопка или a ?Я попробовал следующее:

.not-allowed {
     pointer-events: auto! important;
     cursor: not-allowed! important;
}

Моя кнопка выглядит следующим образом:

<a class="btn btn-primary btn-lg disabled not-allowed" href="https://www.example.com" role="button">Test</a>

Без активированных событий указателя курсор не может быть изменен.Но если события указателя: авто , кнопка или a доступна для нажатия,Если события указателя: нет курсор не меняется.

Пожалуйста, помогите мне, я отчаиваюсь!

Answer 1

У вас есть несколько вариантов, но не все они равны.

Предпочтительно, оберните ваш элемент с помощью div или span и установите курсор на обертку и события указателя на содержимое. Таким образом, вы получаете все преимущества, не связываясь с JS.

Во-вторых, вы можете использовать атрибут disabled на кнопке, чтобы он не работал . Затем вы можете установить курсор на отключенный элемент.

Наконец, но я не советую использовать JS для return false. Несмотря на то, что это работает, мне это не нравится, потому что: событие щелчка по-прежнему инициируется (т.е. щелчок все еще возможен, но ссылка не просматривается), что означает, что вы также визуально думаете, что нажали кнопку.

.disabled-wrapper {
  display: inline-block;
  cursor: not-allowed;
}

.disabled-wrapper a,
.disabled-wrapper button {
  pointer-events: none;
}

button[disabled] {
  cursor: not-allowed;
}

a.disabled.js-test,
button.disabled.js-test {
  cursor: not-allowed;
}

<div class="disabled-wrapper"><a class="btn btn-primary btn-lg disabled not-allowed" href="https://www.example.com" role="button">Test wrapper</a></div>

<button class="btn btn-primary btn-lg disabled not-allowed" href="https://www.example.com" role="button" disabled>Test disabled attribute</button>

<a class="btn btn-primary btn-lg disabled not-allowed js-test" href="https://www.example.com" role="button" onclick="return false">Test JS</a>

Answer 2

использование onclick="return false;"

.not-allowed{
 cursor: not-allowed! important;
    
}

<a class="btn btn-primary btn-lg disabled not-allowed" onclick="return false;" href="https://www.example.com" role="button">Test</a>

Answer 3

Это на самом деле ошибка в Bootstrap

Предлагаемые решения:

button:disabled {
  cursor: not-allowed;
  pointer-events: all !important;
}

или если у вас есть такая структура:

<li class="disabled">
  <a href="#">My Link</a>
</li>

тогда

li.disabled {
  cursor: not-allowed;
}
li.disabled a {
  pointer-events: none;
}

Answer 4

Используйте это:

.not-allowed {
     cursor: not-allowed !important;
}