如何使用 Bootstrap 在导航栏中的一个项目中禁用导航丸悬停效果？

Question

我想在我的导航栏中仅对一项更改页面语言的 link 禁用 nav-pill 悬停效果。使用 bootstrap class 或 CSS 实现此目的的最佳方法是什么？

<div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav nav-pills navbar-right">
                                <li class="language language-active disabled">NL</li>
                                <li class="language language-nonactive language-right"><a href="/en/index.html">EN</a></li>
                                <li class="approach-li"><a href="diensten.html">Diensten</a></li>
                                <li class="about-li"><a href="overons.html">Over ons</a></li>
                            <li class="qa-li"><a href="vragen.html">Vragen</a></li> 
                                <li class="about-li"><a href="contact.html">Contact</a></li>            
                                <li class="navbarpadding">
                                      <form action="afspraak.html">
                                                <button class="btn navbar-btn btn-primary2">Afspraak maken</button>
                                        </form>
                                </li>
            </ul>
</div>

Answer 1

正在使用 class 查看您的 html：“.language-nonactive”

您可以将这些样式与它一起使用，这将消除灰色背景的悬停：

.nav>li.language-nonactive>a:hover, .nav>li.language-nonactive>a:focus {
  background-color: transparent;
}

这是一个 jsfiddle 来展示我所做的：

http://jsfiddle.net/ho1sgm1e/

此外，您可以使用 jquery:

这样的东西

$(document).ready(function() {
  /*disable non active tabs*/
  $('.nav li').not('.active').addClass('disabled');
  /*to actually disable clicking the bootstrap tab, as noticed in comments by user3067524*/
  $('.nav li').not('.active').find('a').removeAttr("data-toggle");  
});

来源：Bootstrap tabs pills disabling and with jQuery

此外，使用禁用的 class 将有效地禁用按钮。

Answer 2

使用CSS：

.nav .language-nonactive a:hover {
    background:rgba(0,0,0,0);
}

如何使用 Bootstrap 在导航栏中的一个项目中禁用导航丸悬停效果？

How to disable a nav-pill hover effect just in one item in the navbar with Bootstrap?

css

twitter-bootstrap

Demo