Question

我想在焦点上显示关闭图标。它已经在React Bootstrap上悬停显示，但是我希望它也能在焦点上显示而且它没有显示圆圈。当我将鼠标悬停在li tag上时，它会显示关闭图标（这是使用反应引导程序）。现在我希望相同的图标显示在焦点a tag上。 Here's the working fiddle.

我的HTML：

<div class="test">
  <nav class="nav">
    <ul class="navtabs">
      <li>
        <a href="showMe/1">
          <div class= "inside">
            <div class="delete">
              <i class="fa-times-circle"> </i>
            </div>
          </div>
        </a>
      </li>
    </ul>
  </nav>
</div>

我的CSS：

.nav > ul.navtabs > li > a:focus > .fa-times-circle::before {
  content: "\F057";
}

Answer 1

您使用的> selector表示.fa-times-circle::before只有在a:focus的直接子项时才会被选中。但事实并非如此 - 你的HTML中有两个div。

移除>选择器，使整个选择器看起来像.nav > ul.navtabs > li > a:focus .fa-times-circle::before，它应该可以正常工作。

另外请务必关闭<a>标记。您在>之后错过了href括号。

CSS在焦点上添加伪元素

1 个答案: