Как получить эффект наведения для значков глифов?

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