1

I am using feather icons, and i would want the feather trash to appear beside the item name when my mouse hovers it.

I see this persons asking the question on Stacks but no answer was found.

Icons Only Appearing When Hover

My code below:

<div class="container-fluid">
 <div class="table-responsive">
    <table class="table table-striped table-sm table-hover">
      <thead>
        <tr>
          <th class=" text-center">Item#</th>
          <th class=" text-center">Item Name</th>
          <th class=" text-center">Qty</th>

      </thead>
      <tbody>
        <tr>
          <td>1,001</td>
          <td>Apple</td>
          <td class=" text-right">5</td>

        </tr>
        <tr>
          <td>1,002</td>
          <td>Kidney Beans</td>
          <td class=" text-right">3</td>

        </tr>

What i want

Samantha
  • 139
  • 1
  • 1
  • 10

3 Answers3

4

The principle: 

tr .fa {                            /* row not hovered */
  opacity: 0;
  transition: opacity .2s ease-out; /* adding transition, improved UI */
  cursor: pointer;                  /* change cursor when hovering icon */
  transition-delay: .5s;            /* delay the icon fading out */
}

tr:hover .fa {                      /* row hovered */
  opacity: 1;
  transition-delay: 0s;             /* cancel delay when entering */
}

In its simplest form: 

tr .fa {
  opacity: 0;
}
tr:hover .fa {
  opacity: 1;
}

Working example: 

tr .fa {
  margin-right: .5rem;
  opacity: 0;
  transition: opacity .2s ease-out;
  cursor: pointer;
  transition-delay: .5s;
}
tr:hover .fa {
  opacity: 1;
  transition-delay: 0s;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="container-fluid">
 <div class="table-responsive">
    <table class="table table-striped table-sm table-hover">
      <thead>
        <tr>
          <th class=" text-center">Item#</th>
          <th class=" text-center">Item Name</th>
          <th class=" text-center">Qty</th>

      </thead>
      <tbody>
        <tr>
          <td>1,001</td>
          <td><i class="fa fa-trash"></i>Apple</td>
          <td class=" text-right">5</td>
        </tr>
        <tr>
          <td>1,002</td>
          <td><i class="fa fa-trash"></i>Kidney Beans</td>
          <td class=" text-right">3</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Feel free to change the selectors so that you don't affect anything else and that they match your current markup.
In your case, you'll want want to replace .fa selector with [data-feather].

tao
  • 82,996
  • 16
  • 114
  • 150
  • tao.. this definitely work in your example.. that is exactly what i want.. can you advise if the principle should be post in my css file? or in my html sheet using script open and close? – Samantha May 08 '20 at 21:27
  • @S, remember to upvote any helpful answer and to mark one as accepted. This improves indexing and, overall, helps future users find the right answers faster. – tao May 08 '20 at 22:55
  • definitely.. thanks again, tao - does stack offers one and one sessions? like if i want to pick your brain directly, every now and then? – Samantha May 09 '20 at 00:09
  • Not really, but I just made [this public room](https://chat.stackoverflow.com/rooms/213476/andrei-gheorghiu). I'll get notified when I get mentioned in it. Most likely, I'll still want you to ask a proper question, so that anyone with the same type of problem might benefit from an answer. – tao May 09 '20 at 10:43
0
  1. Add a class to your icon element
  2. Hide it by add this attribute style="display: none;"
  3. Add the hover effect to your CSS file: .youriconclass:hover {display: block;}
Giangimgs
  • 952
  • 1
  • 12
  • 16
  • tried this with the current code i have, and it shows up as blank.. in addition, i am link my css via html link, how do i edit the bootstrap.min.css file? i think someone advise not to edit this, if i got it local? – Samantha May 08 '20 at 11:34
  • Don't edit your bootstrap.css file. If you want to add custom CSS then create your own style.css file and link to it in the – fraggley May 08 '20 at 11:38
0

jQuery hover method can help you accomplish the task. First, you need to add some HTML modifications like create a container for the icon. e.g.

      <td class="trigger-icon">
         Apple 
         <span class="icon-container"> </span>
      </td>

Now for the js part,

    $(".trigger-icon").hover(function(){
     $(".icon-container").append('<i data-feather="trash"></i>');
    }, function(){
     $(".icon-container").empty();
    });

For feather icon to work,

   $(".trigger-icon").hover(function(){
     $(".icon-container").append('<i data-feather="trash"></i>');
     feather.replace();
    }, function(){
     $(".icon-container").empty();
    });
Nafiz Ahmed
  • 567
  • 3
  • 10
  • quick question.. the js part, can i have that at the bottom of my html between – Samantha May 08 '20 at 11:55
  • It should be inside the $(document).ready method. For reference, see this https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_hover – Nafiz Ahmed May 08 '20 at 13:10
  • Nafiz its not working for me.. been trying both examples// – Samantha May 08 '20 at 16:24
  • Will it be possible to share the js code in codepen so that I can look into the structure? Can you check whether you can do with simple text like '
    Hello
    ' instead of ''?     – Nafiz Ahmed May 08 '20 at 16:27
  • Yes.. how do i do that? – Samantha May 08 '20 at 16:28
  • you can use https://codepen.io/ or https://github.com/ or you can update the question with js code block. Anything that will be easy for you. – Nafiz Ahmed May 08 '20 at 16:33
  • how can we take this in chat to discuss?? The version you sent in w3schhols.com works perfect.. But when i try to get the icon appear when hover, doesnt work.. – Samantha May 08 '20 at 17:00
  • I get it work. Please check https://codepen.io/redoy11/pen/qBOoypr – Nafiz Ahmed May 08 '20 at 17:12