How To Remove Highlighting On Anchor Element?

March 27, 2024 Post a Comment

I have this html elements anchors generated in

element. When I navigate mouse on the links it highlighted. Any idea how can I remove highlight?

Solution 1:

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

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

Solution 2:

You can add some custom CSS to overwrite the bootstrap styles.

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

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

*Note If you include your custom styles after your bootstrap CSS, there is not need for !important. Or if you prefer, you could create a more specific selector like in j08691's answer.

Solution 3:

Add this to your custom css file

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

Solution 4:

Add this to your stylesheet:

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

Solution 5:

You can simply use css hierarchy.

HTML:

<ul class="nav pull-left">             
    <listyle="display: inline-block;text-align: center;"><aclass=""ui-sref="sites.list"><iclass="glyphicon glyphicon-tree-conifer"></i><br>sites</a></li><listyle="display: inline-block;text-align: center;"><aclass=""ui-sref="sitesDamages.sitesList"><iclass="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/

Html5 Manual