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

Как я могу использовать курсор: не разрешенный на кнопках или? Я попробовал следующее:

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

Моя кнопка выглядит так:

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

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

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

Ответы

Ответ 1

На самом деле это ошибка в 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;
}

Ответ 2

Использовать этот:

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

Ответ 3

use 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>

Ответ 4

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

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

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

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

.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>

Ответ 5

Вы можете обернуть свою кнопку в промежуток, как показано ниже

<span>
   <button> click me </button>
</span>

Теперь в css не разрешайте события указателя на кнопку и отключайте курсор для оболочки.

 button {
     pointer-events: none;
     opacity: 0.7
   }


   span {
       cursor: not-allowed;
   }