如何获得一个悬停效果的象形图标

How to get a hover effect for glyphicon icons?

本文关键字：图标 悬停 一个 何获得      更新时间：2023-09-26

我试图使字形图标出现每次我把鼠标悬停在它上面。我用<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>

Glyphicon图标不是.hovering元素上的伪元素，而是包含在i元素上的伪元素。因此，我们还需要针对i元素:

.hovering i::before {
    display: none;
}
.hovering:hover i::before {
    display: block;
}
相关文章：