twitter-bootstrap-3 - 如何从带有 Logo 的导航栏品牌中删除悬停

Question

双 navbar-brand 获取文本和 Logo 似乎工作得很好。但是，删除文本品牌的悬停hilite是否容易？我的链接和下拉菜单确实有用，但我不想要点击品牌标题的功能。悬停具有误导性。

<nav class="navbar navbar-inverse navbar-fixed-top role=navigation">
    <div id="navbar-container" class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!-- is it possible to turn off the hover/highlight for the text brand? -->
            <a class="navbar-brand" href="#">Codeshelf</a>
            <a class="navbar-brand" href="#"><img src="favicon.gif" width="24" height="24"></a>
        </div>
    <!-- links, dropdowns -->
    </div><!-- /.container -->
</nav>

Answer 1

您可以通过添加以下 CSS 并确保它位于核心引导 CSS 文件之后来禁用文本品牌悬停。

.navbar-inverse .navbar-brand:hover, 
.navbar-inverse .navbar-brand:focus {
  background-color: transparent;
  color: #999999;
}

这应该够了吧!这是一个 FIDDLE