Question

双导航栏品牌同时获得文字和徽标似乎完美无缺。但是，为文本品牌移除hover-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

Answer 2

Amir5000的解决方案对我没用。

你也可以用这个解决这个问题：

<a class="navbar-brand" href="#" style="background-color: transparent !important;">Codeshelf</a>
<a class="navbar-brand" href="#" style="background-color: transparent !important;"><img src="favicon.gif" width="24" height="24"></a>

使用!important设置手动内联CSS修复，以覆盖修改此设置的任何其他CSS文件。

如何从带有徽标的navbar-brand中删除悬停

2 个答案: