Demo

Question

我想在我的导航栏中仅对一个项目（即更改页面语言的链接）禁用nav-pill悬停效果。使用bootstrap类或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

使用课程查看您的HTML：＆＃34; .language-nonactive＆＃34;

你可以使用这些样式，这将删除灰色背景的悬停：

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

这是一个展示我所做过的事情的小说：

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

此外，利用disbaled类将有效地禁用按钮。

Answer 2

使用CSS：

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

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

2 个答案:

Demo