时间戳

首页 > 解决方案 > 如何在鼠标悬停时让图标连续显示

javascript - 如何在鼠标悬停时让图标连续显示

问题描述

我正在使用羽毛图标，当我的鼠标悬停在项目名称旁边时，我希望羽毛垃圾出现在项目名称旁边。

我看到这个人在 Stacks 上问这个问题，但没有找到答案。

图标仅在悬停时出现

我的代码如下：

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

我想要的是

标签： javascriptjquerycssbootstrap-4

解决方案

原则：

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

推荐阅读