您现在的位置是：博客首页 > 网站开发 > 网站开发

html元素隐藏与显示

网络2023-03-10【个人博客】人已围观

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

首先先解释一下两种不显示元素的基础知识，然后在给出一个例子及其实现的代码。先展示一下例子想要的效果。
如下图，这个表格最后两列正常情况下是没有显示的。
在这里插入图片描述
当鼠标移动该行时，该行的最后两列显示出来，如下图红框内显示。
在这里插入图片描述
接下来介绍两种使得元素不显示的方法。
CSS中visibility: hidden和display: none 均可以让我们看不到元素，但是有所不同。

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

区别如图红框所示
在这里插入图片描述
最后要实现一开始那个例子，先实现隐藏效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>
1
2
3
.td-hidden {
    visibility: hidden;
}
 

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

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

很赞哦！ ()

上一篇：火车头单篇文章采集多个tag标签并发布

下一篇：实例讲解，元素隐藏的10种实现方案

相关文章

点击排行

「google搜索引擎优化」30岁学seo优化晚「google搜索引擎优化」30岁学seo优化晚

本栏推荐

ModouCMS框架基础知识介绍ModouCMS框架基础知识介绍

标签云

猜你喜欢

站点信息

  • 建站时间：2019-05-13
  • 网站程序：魔豆CMS7.5
  • 博客名称：程序员之路
  • 文章统计：117 篇
  • 源码统计：6 篇
  • 访问统计：
  • 微信公众号：扫描二维码，关注我们
    • 微信公众号