title: Highlight metronic icons only on hover
body: <p>I created a fullscreen icon using metronic theme : </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="portlet light portlet-fit portlet-datatable red-flamingo box"&gt;
    &lt;div class="portlet-title"&gt;
      &lt;div class="caption"&gt;
        &lt;i class="fa fa-check-circle" aria-hidden="true"&gt;&lt;/i&gt;
        &lt;span class="order-number"&gt; Fullscreen me&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="tools"&gt;
        &lt;a href="" class="fullscreen" data-original-title="" title=""&gt; &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="portlet-body"&gt;
      Content
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This created a div which looks like this in chrome:
  <a href="https://i.stack.imgur.com/cvUBg.png" rel="nofollow noreferrer">Div Preview</a></p>
  
  <p>Whenever it is clicked for fullscreen, the button changes into this:
  <a href="https://i.stack.imgur.com/e0T1b.png" rel="nofollow noreferrer">weird looking icon</a> 
  and it remains like that until we click somewhere else.</p>
  
  <p>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?</p>