Greg Gum Greg Gum - 2 months ago 20
CSS Question

Show icon on containing div hover

I want to show the edit icon only when the user hovers over the containing div:

<div class="toolbar">
<span class="pull-xs-right">
<i class="fa fa-pencil show-on-hover"></i>
<i class="fa fa-remove"></i>
</span>
</div>


The remove icon should still display.

How do I do that with css only?

Answer

You can do it simply like this:

.toolbar {
  width: 200px;
  height: 100px;
  background: #000;
  color: #fff;
  padding: 10px;
}

.toolbar .show-on-hover {
  display: none;
  float: left;
  margin: 5px;
}

.toolbar:hover .show-on-hover {
  display: inline;
}
<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>
<div class="toolbar">
     <span class="pull-xs-right">
          <i class="fa fa-pencil show-on-hover"></i>
          <i class="fa fa-remove"></i>
     </span>
</div>

Comments