html - CSS 悬停显示 anchor

Question

因此，我正在尝试重新创建 Facebook Messenger 的齿轮图标，该图标在聊天框对话当前处于事件状态或用户将鼠标悬停在其上时显示。 不太确定如何处理悬停...？

    #gear:before {
        color: black;
        content: "\f43c";
        font-family: "Ionicons";
        display: none;
        float: right;
        padding-right: 10px;
        font-size: 1.2em;
    }

    #list li:hover + #gear:before{
        display: inline-block !important;
    }

    <ul id="list">
       <li class="enter">
           <div class="listContent">
                        
               <a href="#" class="close"></a>
               <span class="name"> Some Name </span>
               <a href="#" id="expand"></a>
               <a href="#" id="gear"></a>

    </div></li></ul>

Answer 1

像这样更改悬停规则#list li:hover #gear:before {

#gear:before {
    color: black;
    content: "ABC";
    font-family: "Ionicons";
    display: none;
    float: right;
    padding-right: 10px;
    font-size: 1.2em;
}

#list li:hover #gear:before {
    display: inline-block;
}

<ul id="list">
  <li class="enter">
    <div class="listContent">

      <a href="#" class="close"></a>
      <span class="name"> Some Name </span>
      <a href="#" id="expand"></a>
      <a href="#" id="gear"></a>

    </div></li></ul>