创建/缩放M10 +群集时，导航链接中的<i>元素<a>- can&#39;t turn off hover highlight

Question

I've got a seemingly small issue I can't seem to correct no matter what I'm trying. This is a navbar problem with an element displaying a font awesome icon, and shows a red text and yellow background when I hover over this icon. The is outside the Dashboard but the Dashboard text doesn't highlight like the icon does. It abides by the navbar wishes. But the .fas or whatever is causing the highlights I'm trying to get rid of. Help me Overflow Kenobis. You're my only hope.

<li class="nav-item" style="">
  <a class="nav-link btn " method="POST" href="/users/dashboard" style="">
    <i class="fas fa-tachometer-alt "></i> Dashboard
  </a>
</li>

Answer 1

我建议使用Chrome Dev Tools / Firebug进行检查。当您选择元素时，会有一个包含CSS规则集的选项卡，您可以找出导致问题的css类。

希望有所帮助

Answer 2

您可以在:hover代码而不是<a>上使用<i>，并从图标中移除:hover ...

...如果找不到:hover图标，可以将pointer-events:none应用于图标。

Stack Snippet

.nav-item a:hover {
  background: yellow;
  color: red;
}

.nav-item a i:hover {
  background: red;
  color: black;
}

.nav-item a i {
  pointer-events: none;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<ul class="nav">
  <li class="nav-item" style="">
    <a class="nav-link btn " method="POST" href="/users/dashboard" style="">
      <i class="fa fa-tachometer"></i> Dashboard
    </a>
  </li>
</ul>