引導庫引用打破錨懸停功能

Question

我發現引導按鈕類似乎打破標準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引用）。但是，只要我加入了參考引導，沒有懸停......

這裏的小提琴：http://jsfiddle.net/ga82Lbm5/1/

如果您刪除引用左側來引導，你會看到，它的作品。

是否可以在引導按鈕上使用懸停功能？或者我將不得不訴諸使用一些自定義jQuery來做到這一點？

Answer 1

Bootstrap將規則pointer-events:none添加到禁用元素的代碼中，以防止懸停工作。您可以通過回覆的變化撤消此：

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

jsFiddle example

Answer 2

我建議你刪除屬性disabled="disabled"因爲你要的hover功能。從邏輯上講，如果你仔細想想，該元素必須「啓用」才能使hover工作。同樣，由於相同的原因，您也可以刪除CSS類disabled類。

東西是引導添加屬性pointer-events: none;類disabled。此屬性的定義（來自Mozilla開發者網絡借來（https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events））是：

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; 
 
    top: 48px; 
 
    left: 0px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<a class="btn btn-danger" href="" id="statement-delete" onclick="return false;">Delete<span id="delete-info"></span></a>