Toni Au Toni Au - 5 months ago 24
CSS Question

CSS Hover to Display Anchor

So I'm trying to re-create Facebook Messenger's gear icon that is displayed when a chat box conversation is currently active or if the user is hovering over it.
Not quite sure what to do about hovering...?



#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

Change your hover rule like this #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>

Comments