使用引導導航

我有引導的導航內的標籤：使用引導導航

高亮位是目前導航的。作爲這樣的列表元素，在懸停顏色的變化，它意味着用作導航動作。我想將它用作靜態標籤，意在向用戶顯示他們在應用程序中的位置。我知道我可以添加'禁用'類以使其看起來'不太'可點擊，但在懸停時它仍會稍微變化，並顯示除默認值外的其他光標。

我希望將它顯示爲一個簡單的居中標籤，它看起來不會以任何方式點擊。

來源

2016-07-07 Gabe O' Leary

在標籤上使用pointer-events: none;將禁止該元素註冊任何鼠標事件，包括懸停效果並繞過您使用它的問題。

來源

2016-07-08 00:12:21

寫完這個問題之後，我決定重寫Bootstrap的特定元素樣式，使它們靜態顯示。

HTML：

<ul class="nav nav-tabs"> 
    <li><a><span class="glyphicon glyphicon-menu-left"></span></a></li> 
    <li class="label-li disabled"><a href="#"></a></li> 
    <li href="#"><span class="glyphicon glyphicon-trash"></span> </a></li> 
</ul>

CSS：

.label-li { 
    width: 80%; 
    font-weight: bold; 
} 
.label-li a { 
    width: 100%; 
    text-align: center; 
    cursor: default !important; 
    border: none !important; 
}

由!important結束了兩行接管什麼預防的引導的風格。

來源

2016-07-08 00:04:22

您也可以使用'pointer-events：none;'這樣該元素甚至不會註冊任何懸停效果。 –

該解決方案更加優雅，我想出了。隨時回答，我會接受 –

儘管您的解決方案確實有效，但我會建議您改爲查看：懸停選擇器（http://www.w3schools.com/cssref/sel_hover.asp）。這是引導程序在內部創建各種效果的方式，並且可以覆蓋它分配的所有屬性，例如顏色和光標更改。只需將它們分配給與正常值相同的值：懸停和沒有任何變化，不需要使用！important。

來源

2016-07-08 00:13:51 Edward

我玩了一下懸停選擇了一下，並沒有得到它做我想要的。 Chrome開發人員工具（根據我所知）並不能很好地向您展示這些不同狀態的CSS樣式。凱文的解決方案似乎是做我要找的最簡單的方法。 –

哦，好的。我很高興你在使用前至少嘗試過！重要的。我同意，凱文的解決方案更好，我不知道指針事件。 – Edward

使用引導導航

回答

相關問題