КАК Чтобы значок отображался в строке при наведении курсора мыши

Question

Я использую значки перьев, и я бы хотел, чтобы след sh появлялся рядом с названием элемента, когда моя мышь наводит на него курсор.

Я вижу, что этот человек задает вопрос о стеках, но ответа не получил найдено.

Иконки появляются только при наведении

Мой код ниже:

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

Answer 1

Принцип:

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 */
}

В простейшем виде:

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

Рабочий пример:

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>

Не стесняйтесь изменять селекторы, чтобы вы не влияли ни на что другое и чтобы они соответствовали вашей текущей разметке.
В вашем случае вы Я захочу заменить селектор .fa на [data-feather].

Answer 2

jQuery метод зависания может помочь вам выполнить sh задачу. Во-первых, вам нужно добавить некоторые изменения HTML, например создать контейнер для значка. например,

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

Теперь для части js,

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

Чтобы значок пера работал,

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

Answer 3

1. Добавьте класс к элементу значка
2. Скройте его, добавив этот атрибут style="display: none;"
3. Добавьте эффект наведения в ваш CSS файл: .youriconclass:hover {display: block;}