簡體   English   中英

懸停時Twitter Bootstrap導航欄按鈕顏色更改

[英]Twitter bootstrap navbar button color changes on hover

在我的Twitter引導網站上,我有一個導航欄。 它上面有按鈕。
我為它們添加“ btn-success”或“ btn-danger”類以進行顏色標記。
之所以這樣做,是因為當用戶更改主題(css)按鈕時,會相對於該主題顯示按鈕。

我使用navbar-inverse 所以背景是黑色的。 我將按鈕鏈接的顏色更改為白色。 但是問題是當用戶將鼠標懸停在按鈕上時,按鈕變為透明並且無法讀取顏色。

因此,我需要導航欄按鈕是可見的,即使用戶將鼠標懸停在其上。 我希望按鈕顏色在懸停時相同。

我的小提琴: http : //jsfiddle.net/mavent/4RhhF/15/

<nav class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header" style="text-align:center;">
        <div style="padding-top: 15px;"> 
            <a href="/page0" style="color:#ffffff;margin-top:40px;">Example.com</a>    
        </div>
    </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li>
                <a class="btn btn-danger" style="color:#000" href="#">
                    <span>MyButton is very good</span>
                </a>    
            </li>
            <li>
                <a class="btn btn-success" style="color:#000" href="#">
                    <span>MyButton is very good 2</span>
                </a>    
            </li>
        </ul>
    </div>
</nav>

您必須在自定義css文件中添加以下內容:

/* This would be for the danger button... */
.navbar-inverse .navbar-nav>li>a.btn-danger:hover {
    background-color: #d9534f;
}

/* ...and this one for the success button */
.navbar-inverse .navbar-nav>li>a.btn-success:hover {
    background-color: #5cb85c;
}

基本上,您是在手動將每個按鈕的背景色重新着色。

這是您更新的小提琴

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM