Highlight metronic icons only on hover

时间:2017-07-06 16:28:53

标签: html css glyphicons metronic

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

无论何时单击全屏,按钮都会变为: weird looking icon 在我们点击其他地方之前,它仍然是这样。

我认为这个问题是因为即使点击后它仍然突出显示;因此,如果仅在鼠标悬停时突出显示图标,则可以解决此问题。关于如何解决这个小故障的任何想法?

1 个答案:

答案 0 :(得分:0)

看起来您的锚标记在焦点上显示下划线。尝试将其添加到CSS样式表中:

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