html - Bootstrap "jumbotron-narrow"示例。风格如何变化？

Question

我正在查看 Bootstrap 站点示例 http://getbootstrap.com/examples/jumbotron-narrow/#当我将鼠标悬停在“关于”或“联系”链接上时，文本周围会出现一个灰色圆框。当鼠标离开元素时，灰色圆框消失。

这让我发疯!我检查了这些元素并检查了应用于它们的样式，并检查了其中的每一个，所有继承的，全部。有人可以通过 css 告诉我这是怎么回事吗？我希望找到某种 :hover 或 :focus css 但不存在。此外，改变背景的不是 javascript，因为我已经在启用 javascript 的情况下测试了网站。

请帮忙，我会永远爱你。

Answer 1

您要查找的代码:

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

super 简单，修复:

<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 让它在你悬停时变成灰色？

这是因为它告诉访问者，他们正在点击某些东西:一个链接。并使其更加用户友好并改善网站的用户体验。