html - Bootstrap Library 引用打破了 anchor 悬停功能

Question

在发现 Bootstrap 按钮类似乎破坏了标准 CSS 中的悬停功能后，我感到非常沮丧。

我真的不想使用工具提示，所以我决定尝试让我自己的灰色框出现在我的按钮旁边，以显示它在悬停时被禁用的原因。这是我的代码:

HTML

 <a class="btn btn-danger disabled" disabled="disabled" href="" id="statement-delete" onclick="return false;">Delete
     <span id="delete-info"></span>
</a>

CSS

#statement-delete:hover #delete-info {
    display: block;
}

#delete-info {
    display: none;
    background: #C8C8C8;
    margin-left: 0px;
    padding: 10px;
    position: absolute;
    z-index: 1000;
    width:200px;
    height:100px;
}

我想我一定是做错了什么，直到我使用了 JSFiddle，它神奇地起作用了(在添加 Bootstrap 引用之前)。但是，一旦我添加了对 Bootstrap 的引用，就没有悬停...

这是 fiddle :http://jsfiddle.net/ga82Lbm5/1/

如果您删除左侧对 bootstrap 的引用，您会发现它有效。

是否可以在 Bootstrap 按钮上使用悬停功能？还是我必须求助于使用一些自定义 jQuery 来执行此操作？

Answer 1

Bootstrap 将规则 pointer-events:none 添加到禁用元素的代码中，以防止悬停工作。您可以通过以下方式还原更改来撤消此操作:

a.btn.disabled {
    pointer-events: auto;
}

jsFiddle example