删除按钮上的引导导航栏悬停效果

Posted 2023-03-06

【中文标题】删除按钮上的引导导航栏悬停效果

【英文标题】：remove bootstrap navbar hover effect on button

【发布时间】：2016-10-25 00:11:08

【问题描述】：

我想从导航栏中的按钮中删除悬停效果，我该怎么做？[在此处输入图像描述][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>

【问题讨论】：

您说的是哪个按钮，悬停效果是什么？如果您可以对代码进行工作，那将非常有帮助。那么我们可以给你一个非常确定的答案

【参考方案1】：

添加这个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>

【参考方案2】：

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

这只会删除悬停效果，而不是活动效果

【参考方案3】：

a:hover 
 display: none;

这将删除悬停时的所有内容，但如果您只想让它看起来没有悬停，您可以设置 a:hover 的背景颜色与原始颜色相同。例如。