NAV

2016-07-07 3 views
0

私は、ブートストラップNAV持っている:強調表示ビットは、現在NAVのリスト要素であり、そのようなものとして、オーバーホバー上の色の変化と、それが意味するNAV

enter image description here

をナビゲーションアクションとして使用されます。代わりに静的ラベルとして使用したいと思っています。アプリケーションにどこにいるのかをユーザーに示すことを目的としています。私はクラス 'disabled'を追加してクリック可能であるように見えるようにすることができますが、マウスオーバー時には少し変化し、デフォルト以外のカーソルも表示します。

私はそれがどのような方法でクリック可能であるようには見えないシンプル中心にラベルとして表示持つように願っています。私は、彼らが静的に表示されるように、単に問題の特定の要素のためのブートストラップのスタイルを上書きすることを決定し、この質問を書き込んだ後

答えて

1

は、任意のマウスイベントを登録するホバー効果を含めて、あなたがそれを持っていた問題を迂回要素を無効にします。ホバーセレクター(http://www.w3schools.com/cssref/sel_hover.asp):あなたのソリューションは、作業を行いながら

0

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で終了の2行は引き継ぐから何を防ぐためのブートストラップのスタイルです。ラベルにpointer-events: none;を使用して

+1

'pointer-events:none; 'を使うこともできるので、要素はホバー効果を登録しません。 –

+1

その解決策は、私が思いついたよりもさらにエレガントです。自由にお答えください。私は受け入れるでしょう –

0

、私は見ての代わりに推薦します。これは、ブートストラップが内部でさまざまなエフェクトを作成するもので、色やカーソルの変更など、割り当てられたすべてのプロパティをオーバーライドできます。ホバーと何も変わらず、!importantを使用する必要はありません。

+0

私はホバーセレクターで少し遊んで、私が望むことをすることができませんでした。クロム開発ツール(私が言うことができます)は、これらのさまざまな州のCSSスタイルを示す非常に良い仕事をしません。 Kevinのソリューションは、私が探しているものを行う最も簡単な方法のようです。 –

+0

大丈夫です。私はあなたが少なくとも行く前にそれを試したことがうれしいです!重要です。そして、私は同意する、ケビンのソリューションが良いです、私はポインタイベントを知らなかった。 – Edward