CSS在焦點上添加僞元素

我想顯示焦點上的關閉圖標。它已經在React Bootstrap上懸停顯示，但我希望它在焦點上顯示，並且不顯示圓圈。當我懸停在li tag上時，它顯示關閉圖標（這是使用反應引導程序）。現在我想讓相同的圖標顯示在a tag的焦點上。 Here's the working fiddle.CSS在焦點上添加僞元素

我的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"; 
}

來源

2017-11-25 ksernow

也許只是複製/粘貼問題，但在此代碼中缺少兩個正確的插入符號。一個放在你的'a'標籤上，另一個放在你的'i'標籤上。 –

您似乎拼錯了標記中的圖標類名稱。如果你將'

的> selector您使用的手段，如果它是a:focus直接子.fa-times-circle::before纔會被選中。但它不是 - 你的HTML中有兩個div。

刪除>選擇器，使您的整體選擇器看起來像.nav > ul.navtabs > li > a:focus .fa-times-circle::before，它應該工作。

此外請務必關閉您的<a>標籤。您在href之後缺少>支架。

來源

2017-11-25 21:14:48 cjl750

已刪除>但它仍然不顯示僞元素 – ksernow

@ksernow請務必關閉您的''標記，如果它仍然不起作用，則需要在Stack Snippet中重現問題，以便我們可以看到行動中的問題。從你提供的信息，它應該工作。 – cjl750

感謝作品。 https://jsfiddle.net/9bo81jyy/ – ksernow

CSS在焦點上添加僞元素

回答

相關問題