如何获得字形图标的悬停效果？

Question

我试图让每次将鼠标悬停在其上时出现字形图标。我正在为它使用 <span> 标签。但这拒绝工作。我做错了什么？

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

Answer 1

Glyphicon 图标不是 .hovering 元素上的伪元素，它是其中包含的 i 元素上的伪元素。因此，我们还需要定位 i 元素：

.hovering i::before {
    display: none;
}

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

如何获得字形图标的悬停效果？

How to get a hover effect for glyphicon icons?

javascript

jquery

html

css

css-content