Question

我使用bootstrap nav选项卡制作主页面标签。我的设计方式是，当用户将鼠标悬停在任何标签上时，它会改变颜色。我现在遇到的问题是悬停不会覆盖每个标签的整个范围。我环顾网络来解决这个问题，但我无法解决这个问题。

HTML

<header>
<a href="#">
  <img src="../static/img/the_logo_original_fixed.jpg" style="width: 140px;height:100px;" class="the_logo">
</a>
<nav class="navbar navbar-light bg-faded">

  <ul class="nav nav-tabs" style="border-bottom:0px">

    <li class="nav-item">
    <a class="nav-link" href="#">Services</a>
    </li>

    <li class="nav-item">
    <a class="nav-link" href="#">Support</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Contact</a>
    </li>
  </ul>
</nav>
</header>

CSS

.the_logo{
margin-top: 20px;
margin-bottom: 20px;
}
nav.navbar.navbar-light.bg-faded{
background-color: #3081B7;
}

a{
color: white !important;
font-size: 120%;
}

.nav.nav-tabs > li > a:hover,
.nav.nav-tabs > li > a:active,
.nav.nav-tabs > li > a:focus{
background-color: #5FA6D5 !important;
border: none;
color: #5FA6D5;
}

Answer 1

尝试将悬停功能添加到列表项而不是锚标记，因为锚标记较小，只覆盖文本区域。

Bootstrap navtab hover不会覆盖完整标签

1 个答案: