如何显示隐藏的对象

Question

对于我来说，我想在启动时隐藏十字，当我将鼠标悬停在鼠标上时，它应该是可见的，但它不起作用：

table, th, td {
   border: 1px solid black;
   padding: 10px;
}

table {
    border-collapse: collapse;
}

i {
  cursor: pointer;
  visibility: hidden;
}

i:hover {
  visibility: visible;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<table>
<tr>
  <td>Example text</td>
  <td><i class="fa fa-times-circle"></i></td>
</tr>
</table>

Answer 1

改为更改opacity属性：

table,
th,
td {
  border: 1px solid black;
  padding: 10px;
}

table {
  border-collapse: collapse;
}

i {
  cursor: pointer;
  opacity: 0;
}

i:hover {
  opacity: 1;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<table>
  <tr>
    <td>Example text</td>
    <td><i class="fa fa-times-circle"></i></td>
  </tr>
</table>