html - 悬停背景不以 Bootstrap 3 中的元素为中心

Question

我尝试修改导航栏上的悬停效果，但没有成功。我的想法是当我悬停链接(垂直居中)时使出现一个小矩形。该矩形应小于导航栏的总高度。

现在，我对悬停链接产生了奇怪的影响，下拉菜单不再起作用

我创建了一个 bootply我的问题

Answer 1

在这里，你需要添加<span>在 <a> 中标记标签。另外，需要在 css 中进行一些修改。

HTML

<div class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                  <li><a href="/"><span>Home</span></a></li>
                  <li><a href="/"><span>About</span></a></li>
                  <li><a href="/"><span>Contact</span></a></li>

                  <li class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle"><span>Dropdown <b class="caret"></b></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                    </ul>
                </li>
              </ul>
           </div>
        </div>
    </div>

CSS

.navbar-default {
    background-color: #FFFFFF;
}

ul.nav > li > a span
{ 
  height: 28px;
  display: inline-block;
  line-height: 28px;
  padding-right:15px; padding-left:15px;
}
ul.nav > li > a:hover span
{ 
  background-color: #f0f0f0 !important; 
  border-radius: 6px !important;
}
ul.nav > li > a{padding-right:0px; padding-left:0px;}

还有，查一下bootply