时间戳

首页 > 解决方案 > 将鼠标悬停在按钮上，带删除线的文本

html - 将鼠标悬停在按钮上，带删除线的文本

问题描述

我正在尝试编辑我的代码，如果我将鼠标悬停在删除按钮上，文本会得到一个删除线，就像 css 选项text-decoration: line-through一样。 编辑：当悬停在删除按钮上时，我试图让文本 “创建这个基本的 TODO 网站”带有删除线

有没有办法在不使用JS的情况下实现这一点，还是我需要使用JS？（我目前正在使用 Bootstrap4）

代码部分是：

<tr>
  <th scope="row">3</th>
  <td class="text-justify">Creating this basic TODO Website</td>
  <td>14/05/2020</td>
  <td>
    <div class="progress">
      <div class="progress-bar" role="progressbar" style="width: 10%;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">10%</div>
    </div>
  </td>
  <td>
    <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="top" title="Edit" onclick="window.location.href='Edit.html' ;">
        <i class="material-icons">create</i>
     </button>
    <button type="button" class="btn btn-warning">
        <i class="material-icons">delete</i>
    </button>
  </td>
</tr>

标签： htmlcssbootstrap-4

解决方案

你可以用 CSS 做到这一点

i:hover {
     text-decoration: line-through;
  }

推荐阅读