Question

我在<ul>元素中生成了这个html元素锚点。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<ul class="nav pull-left">             
    <li style="display: inline-block;text-align: center;"><a class="" ui-sref="sites.list"><i class="glyphicon glyphicon-tree-conifer"></i> <br>sites</a></li>
    <li style="display: inline-block;text-align: center;"><a class="" ui-sref="sitesDamages.sitesList"><i class="glyphicon glyphicon-exclamation-sign"></i> <br>events</a></li>         
</ul>

＆＃13;

当我在突出显示的链接上导航鼠标时。

知道如何删除高亮显示？

Answer 1

Bootstrap的CSS规则之一是：

.nav > li > a:focus, .nav > li > a:hover {
    text-decoration: none;
    background-color: #eee;
}

只需使用您自己的更具体的规则覆盖它：

.nav.pull-left>li>a:focus, .nav.pull-left>li>a:hover {
  background-color: transparent;
}

实施例：

.nav.pull-left>li>a:focus,
.nav.pull-left>li>a:hover {
  background-color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<ul class="nav pull-left">
  <li style="display: inline-block;text-align: center;"><a class="" ui-sref="sites.list"><i class="glyphicon glyphicon-tree-conifer"></i> <br>sites</a>
  </li>
  <li style="display: inline-block;text-align: center;"><a class="" ui-sref="sitesDamages.sitesList"><i class="glyphicon glyphicon-exclamation-sign"></i> <br>events</a>
  </li>
</ul>

Answer 2

您可以添加一些自定义CSS来覆盖引导程序样式。

.nav>li>a:hover {
    background-color: transparent !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<ul class="nav pull-left">             
    <li style="display: inline-block;text-align: center;"><a class="" ui-sref="sites.list"><i class="glyphicon glyphicon-tree-conifer"></i> <br>sites</a></li>
    <li style="display: inline-block;text-align: center;"><a class="" ui-sref="sitesDamages.sitesList"><i class="glyphicon glyphicon-exclamation-sign"></i> <br>events</a></li>         
</ul>

*注意如果在引导CSS之后包含自定义样式，则不需要!important。或者，如果您愿意，可以创建一个更具体的选择器，如j08691的答案。

Answer 3

将此添加到您的自定义css文件

ul.nav.pull-left a:hover {
    background: none;
}

Answer 4

将其添加到样式表中：

a:hover {
  background-color: transparent !important;
}

Answer 5

您可以简单地使用css层次结构。

HTML：

<ul class="nav pull-left">             
    <li style="display: inline-block;text-align: center;"><a class="" ui-sref="sites.list"><i class="glyphicon glyphicon-tree-conifer"></i> <br>sites</a></li>
    <li style="display: inline-block;text-align: center;"><a class="" ui-sref="sitesDamages.sitesList"><i class="glyphicon glyphicon-exclamation-sign"></i> <br>events</a></li>         
</ul>

CSS：

ul.nav>li>a:focus, ul.nav>li>a:hover {
    background-color: transparent;
}

https://jsfiddle.net/rLxnczdp/

Answer 6

这是因为bootstrap css。

    .nav>li>a:focus, .nav>li>a:hover {
        text-decoration: none;
        background-color: #eee;
    }

    a:focus, a:hover {
        color: #23527c;
        text-decoration: underline;
   }

您可以通过添加一些css来解决此问题。

a {
   color: #337ab7;
   text-decoration: none;
 }
.nav>li>a:hover {
    background-color: transparent !important;
    color: #337ab7;
 }

通过赋予颜色属性，将删除悬停颜色更改。

试试这个

Answer 7

这是一个问题，因为bootstrap已经设置了样式。您可以使用自己的样式覆盖它们的样式。

将其添加到样式表中：

.nav>li>a:hover,
.nav>li>a:focus {
  background-color: transparent !important;
}

如何删除锚元素上的突出显示？

7 个答案: