显示包含div hover的图标

Question

我想仅在用户将鼠标悬停在包含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>

仍应显示删除图标。

我如何只用css做到这一点？

Answer 1

你可以这样做：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;