如何清除锚点元素的突出显示？ [英] How to remove highlighting on anchor element?

问题描述

我有在< ul> 元素中生成的html元素定位符。

< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< ; / script><！ - 最新编译和缩小的CSS - >< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min的CSS诚信=SHA384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTsz / K68vbdEjh4ucrossorigin =匿名><脚本SRC =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js 诚信=SHA384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txacrossorigin =匿名>< / SCRIPT>< UL类=NAV拉左> < li style =display：inline-block; text-align：center;>< a class =ui-sref =sites.list>< i class =glyphicon glyphicon- conifer>< / i> < br>网站< / a>< / li> <李风格=显示：inline-block的;文本对齐：中心;><一类=UI-SREF =sitesDamages.sitesList>< I类=glyphicon glyphicon-exclamation- sign>< / i> < br>事件< / a>< / li> < / ul>

解决方案

任何想法如何清除突出显示？ 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><!--最新编译和缩小的CSS  - >< link rel =stylesheethref =https：// maxcdn .bootstrapcdn.com /引导/ 3.3.7 / CSS / bootstrap.min.css诚信=SHA384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTsz / K68vbdEjh4ucrossorigin =匿名><脚本SRC =HTTPS：//maxcdn.bootstrapcdn .COM /引导/ 3.3.7 / JS / bootstrap.min.js诚信=SHA384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txacrossorigin =匿名>< / SCRIPT>< UL类=NAV拉左> < li style =display：inline-block; text-align：center;>< a class =ui-sref =sites.list>< i class =glyphicon glyphicon- conifer>< / i> < br>网站< / a> < / li> <李风格=显示：inline-block的;文本对齐：中心;><一类=UI-SREF =sitesDamages.sitesList>< I类=glyphicon glyphicon-exclamation- sign>< / i> < br>事件< / a> < / li>< / ul>  

I have this html elements anchors generated in <ul> element.

<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>

When I navigate mouse on the links it highlighted.

Any idea how can I remove highlight?

解决方案

One of Bootstrap's CSS rules is :

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

Simply override it with your own, more specific rule:

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

Example:

.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>

这篇关于如何清除锚点元素的突出显示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！