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

Answer 2

您必须更改ul.nav

的高度，如下所示

ul.nav > li > a:hover
{ 
     background-color: #f0f0f0 !important; 
     border-radius: 6px !important;
     height: 35px;//Change according to your wish
     margin-top:5px;//You can add this too
}

点击此处Bootply

悬停背景不以Bootstrap 3中的项目为中心

2 个答案: