无法弄清楚如何摆脱白色背景

Question

所以我制作了一个带有几个按钮的导航栏，我现在遇到的主要问题是，每当我将鼠标悬停在按钮上时，就会有一个围绕它的白色框。

这是我Code的链接。

<div id="navigationBar">
<nav class="navbar navbar-default">
<div class="navbar-custom" id="vmanCoding">
  <a class="brand-name" href="#"><button type="button">vMan Coding</button>
</a>
</div>
<div class="btn-custom">
  <ul class="nav">
    <li><a href="#"><button type="button" id="about">About</button></a></li>
    <li><a href="#"><button type="button" id="portfolio">Portfolio</button>
</a></li>
    <li><a href="#"><button type="button" id="contact">Contact</button></a>
</li>
  </ul>
</div>
</nav>
</div>

Answer 1

继承人codepen

由于默认引导CSS应用背景颜色。 您需要覆盖自定义代码中的background-color

.btn-custom .nav li a:hover { 
  background-color: transparent;
}

Answer 2

在你的css中改变这个：

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