CODEWITHSUNDEEP
javascriptjqueryhtmlcsscss-content
Alex Nikolsky
Alex Nikolsky

Reputation: 2179

How to get a hover effect for glyphicon icons?

I'm trying to make glyphicon icon appear every time I hover my mouse over it. And I'm using <span> tag for it. But this refuses to work. What have I done wrong?

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

In my view file it looks like this:

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

Upvotes: 2

Views: 4088

Answers (1)

James Donnelly
James Donnelly

Reputation: 128791

The Glyphicon icon isn't a pseudo-element on the .hovering element, it's a pseudo-element on the i element contained within. Because of this, we need to target the i element as well:

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

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

Upvotes: 2

Related Questions