如何显示隐藏的对象[重复]答案

【问题标题】：How to display hidden object [duplicate]如何显示隐藏的对象[重复]
【发布时间】：2019-01-13 21:10:40
【问题描述】：

在我的情况下，我想在启动时隐藏十字，当我将鼠标悬停时它应该是可见的，但它不起作用：

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>

【问题讨论】：

因为它是隐藏的......改用不透明度

标签： css hover

【解决方案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>

【讨论】：