2016-06-22 216 views
0

引导导航栏悬停效果我想从我的按钮删除悬停效果的导航栏我该怎么办呢?[在这里输入的形象描述] [1]删除按钮

<nav class="navbar navbar transparent"> 
    <div class="container-fluid logo "> 
    <div class="navbar-header "> 
     <a class="navbar-brand " href="#"> 
     <img src="images/Logo.png" /> 
     </a> 
    </div> 
    <ul class="nav navbar-nav navbar-right right"> 
     <li> 
     <a href="#">Get free trial</a> 
     </li> 
     <li class="Buybtn-topright"> 
     <a href="#">Buy now</a> 
     </li> 
    </ul> 
    </div> 
</nav> 
+2

哪个按钮,你说究竟什么是悬停效果?如果你可以用代码做一个小工具,这将是非常有帮助的。那么我们可以给你一个非常明确的答案 – blubberbo

回答

2
a:hover { 
display: none; 
} 

这是怎么回事去掉悬停的所有东西,但是如果你想让它看起来像没有悬停在那里,你可以设置a:hover的背景颜色与原来的一样。例如。

3

添加这个CSS

.nav>li>a:focus, .nav>li>a:hover { 
     text-decoration: none; 
     background-color: transparent !important; 
    } 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
    <nav class="navbar navbar transparent"> 
     <div class="container-fluid logo "> 
     <div class="navbar-header "> 
      <a class="navbar-brand " href="#"> 
      <img src="images/Logo.png" /> 
      </a> 
     </div> 
     <ul class="nav navbar-nav navbar-right right"> 
      <li> 
      <a href="#">Get free trial</a> 
      </li> 
      <li class="Buybtn-topright"> 
      <a href="#">Buy now</a> 
      </li> 
     </ul> 
     </div> 
    </nav> 
+0

这是唯一一个为我工作的人! –

1

.navbar-default .navbar-nav li a:hover, .navbar-default .navbar-nav > .active > a:hover, { background-color: initial; }

这只会删除悬停效果,而不是积极的作用