Javascript 如何为glyphicon图标获得悬停效果？

每次我将鼠标悬停在glyphicon图标上时，我都试图使它出现。我使用了

标记。但这是行不通的。我做错了什么

应用程序.scss

 /*
 *= require bootstrap3-editable/bootstrap-editable
 *= require bootstrap-datepicker3
 *= require_tree .
 */

  @import "bootstrap-sprockets";
  @import "bootstrap";

.hovering:before {
display: none;
}

.hovering:hover:before {
display: block;
}

在我的视图中文件如下所示：

  <span class='hovering'>
    <%= link_to user_task_path(current_user, task.id), method: :delete,
    data: { confirm: 'Are you sure?' }, remote: true do %>
      <i class="glyphicon glyphicon-trash"></i>
    <% end %>
  </span>

---

Glyphicon图标不是

上的伪元素。悬停
元素，它是包含在中的
i
元素上的伪元素。因此，我们还需要针对
i
元素：

。悬停i:：before{
显示：无；
}
.悬停：悬停i：：之前{
显示：块；
}