html元素隐藏与显示

首先先解释一下两种不显示元素的基础知识，然后在给出一个例子及其实现的代码。先展示一下例子想要的效果。
如下图，这个表格最后两列正常情况下是没有显示的。

当鼠标移动该行时，该行的最后两列显示出来，如下图红框内显示。

接下来介绍两种使得元素不显示的方法。
CSS中visibility: hidden和display: none 均可以让我们看不到元素，但是有所不同。

1. 作用不同
   visibility: hidden——将元素隐藏，但是在网页中度该占的位置还是占着。
   display: none——将元素的显示设为无，即在网页中不占任何的位置。
2. 使用后HTML元素有所不同
   visibility:hidden，使问用该属性后，HTML元素（对象）仅仅是在视答觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。
   display:none，使用该属性后，HTML元素（对象）的宽度、高度等各回种属性值都将“丢失”。

区别如图红框所示

最后要实现一开始那个例子，先实现隐藏效果。

<td class="operations">
	<a
		class="td-hidden"
		@click="onCreateActivity(item)">
		创建活动
	</a>
</td>
<td class="flight-detail">
	<a
		class="td-hidden"
		@click="openFlightDetail(item.flightNoId)">
		<i class="fa fa-file-text"/>
	</a>
</td>

.td-hidden {
    visibility: hidden;
}

即可隐藏，然后当鼠标移动至该行显示时需要补充一个知识。CSS:hover选择器 :hover 选择器用于选择鼠标指针浮动在上面的元素。详情见链接
所以代码如下，鼠标指针浮动在tr行时，使用tr控制其内部的td-hidden。

tr:hover .td-hidden {
    visibility: visible;
}