Highlight metronic icons only on hover

Question

I created a fullscreen icon using metronic theme :

<div class="portlet light portlet-fit portlet-datatable red-flamingo box">
  <div class="portlet-title">
    <div class="caption">
      <i class="fa fa-check-circle" aria-hidden="true"></i>
      <span class="order-number"> Fullscreen me</span>
    </div>
    <div class="tools">
      <a href="" class="fullscreen" data-original-title="" title=""> </a>
    </div>
  </div>
  <div class="portlet-body">
    Content
  </div>
</div>

This created a div which looks like this in chrome: Div Preview

Whenever it is clicked for fullscreen, the button changes into this: weird looking icon and it remains like that until we click somewhere else.

I think this problem is caused because it remains highlighted even after click; and hence this could be solved if the highlighting of icons occurs only on mouse hover. Any ideas on how to solve this small glitch?

Answer 1

Looks like your anchor tag is showing an underline on focus. Try adding this to your CSS stylesheet:

.fullscreen:focus { text-decoration: none; }