Question

How can I use cursor: not-allowed on button or a? I tried the following:

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

My button looks like this:

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

Without the pointer-events is activated, the cursor can not be changed. But if pointer-events: auto, the button or a is clickable. If the pointer-events: none the cursor doesn't change.

Please help me, I despair!

Answer 1

这实际上是Bootstrap中的bug

建议的解决方案：

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 2

使用此：

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

Answer 3

使用 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 4

你有很多选择，但并非所有选项都是平等的。

最好使用div或span包装元素，并将光标设置在内容的包装器和指针事件上。通过这种方式，您可以在不搞乱JS的情况下获得所有好处。

其次，您可以在按钮上使用属性disabled，这样就可以使无法正常工作。然后，您可以将光标设置为已禁用的元素。

最后，但我不建议，正在使用JS return false。即使这样有效，我也不喜欢它，因为：点击事件仍然被触发（即仍然可以点击但链接没有被跟踪），这意味着您还可以直观地认为您点击了该按钮。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

您可以按如下所示将按钮包裹在跨度中

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

css中的现在不允许按钮上的指针事件，并且使包装器无法使用光标。

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


   span {
       cursor: not-allowed;
   }

如何更改光标以禁用<按钮>或<a> in Bootstrap 4?

5 个答案: