Question

我正在尝试编辑代码，以便将鼠标悬停在删除按钮上时，文本会获得一条删除线，就像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>

Answer 1

您可以使用CSS

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

Answer 2

使用引导程序X时，仍然可以使用CSS：

foo()

button.not-available:hover, button.not-available i:hover {
    text-decoration: line-through;
}

Answer 3

好的，我想我理解您的问题。问题是css中没有“先前的兄弟”或“父”选择器。但是我认为对dom进行一些棘手的修改以及纯CSS可以实现目标。

table tr {
  display:flex;
  flex-direction: row-reverse;
}

table tr td:hover+td+td+td+td.your-text {
  text-decoration: line-through;
}

<table border=1>
  <tr>
     <td>
      <button type="button" class="btn btn-warning">
          <i class="material-icons">delete</i>
      </button>
    </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>
     </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>14/05/2020</td>
    <td class="text-justify your-text">Creating this basic TODO Website</td>
    <th scope="row">3</th>
  </tr>
</table>

说明：将td-s颠倒，而CSS flexbox进行颠倒顺序。因此它是正常顺序可见的，但很重要：在dom中，它是相反的。之后，您可以多次使用next元素选择器（+）。最后一个技巧：我将按钮单元格分为两部分，以准确访问删除按钮的单元格。

将鼠标悬停在按钮上，删除线文本

3 个答案: