Bootstrap“jumbotron-narrow”的例子。风格如何变化？

Question

我正在浏览引导网站示例http://getbootstrap.com/examples/jumbotron-narrow/# 当我将鼠标悬停在＆＃34;关于＆＃34;或＆＃34;联系＆＃34;链接文本周围出现灰色圆框。当鼠标离开元素时，灰色圆角框会消失。

这让我抓狂！我已经检查了这些元素并经历了应用于它们的样式，并且经历了它们中的每一个，所有继承的，整个批次。有人可以通过CSS告诉我究竟是怎么回事吗？我期望找到某种：悬停或：焦点css但不存在。此外，由于我在启用了javascript的情况下对网站进行了测试，因此不会改变后台的javascript。

请帮忙，我会永远爱你。

Answer 1

您正在寻找的代码：

.nav > li > a:hover, .nav > li > a:focus {
    text-decoration: none;
    background-color: #EEE;
}

超级简单，修复：

<link bootstrap />
<link custom />  <-- Overwrite CSS by placing external file after in HTML

或者：

<link bootstrap />
<style></style> <-- Overwrites bootstrap's external CSS

要改变的CSS很简单：

.nav > li > a:hover, .nav > li > a:focus {
    background-color: none;
}

为什么Bootstrap会这样做，如果你悬停，它会变灰？

这是因为它告诉访问者他们在可点击的东西上：链接。并使其更加用户友好，并改善了网站的用户体验。

Answer 2

当您悬停这些元素时会应用CSS -

.nav>li>a:hover, .nav>li>a:focus {
   text-decoration: none;
   background-color: #eee;
}

请看红色突出显示 -

Answer 3

Demo

HTML

<ul class="nav">
    <li> <a href="#">About</a>

    </li>
</ul>

CSS

   .nav>li>a:hover, .nav>li>a:focus {
        text-decoration: none;
        background-color: #eee;
    }
    .nav>li>a {
        position: relative;
        display: block;
        padding: 10px 15px;
        border-radius: 4px;
        text-decoration:none;
        width:50px;
        text-align:center;
    }
    .nav {
        list-style: none;
    }

Answer 4

由于bootstrap.min.css文件中的以下css，按钮背景变为灰色：

nav>li>a:hover,.nav>li>a:focus{text-decoration:none;background-color:#eee}

您可以对前面提到的代码运行查找，以便在bootstrap.min.css文件中找到它。