Question

因此，我尝试重新创建Facebook Messenger的齿轮图标，该图标在聊天框会话当前处于活动状态或用户悬停在其上时显示。不太清楚如何处理悬停......？

＆＃13;

    #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;
    }

＆＃13;

    <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>

＆＃13;

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>

CSS悬停显示锚点

1 个答案: