当前位置:首页 > 技术分析 > 正文内容

CSS中元素显示、隐藏及其应用_css隐藏元素的方法中可以触发点击事件

ruisui882个月前 (03-02)技术分析9

1.元素的显示与隐藏

display、visibility两个属性都可以实现元素的显示与隐藏

(1.1)display:none;隐藏元素;

display:block;以块级元素显示;

(1.2)visibility:hidden;隐藏元素;

visibility:visibile;显示元素;

display和visibility的区别在于,使用display属性隐藏元素后,不再占据原先位置;而使用visibility属性隐藏元素后,其原先位置仍被占据。

2.元素内容显示与隐藏

overflow属性会对溢出元素框的内容如何展示进行设置。

(2.1)overflow:visible;不做限制,保持原样显示,为默认值

(2.2)overflow:hidden;超出元素框的内容被隐藏

(2.3)overflow:scroll;添加滚动条,不管是否有内容溢出

(2.4)overflow:auto;当有内容溢出时,添加滚动条

3.元素显示与隐藏的应用

制作遮罩效果。

实现思路:遮罩层默认为隐藏,当鼠标在元素上方时则显示,鼠标不在元素上方时则隐藏。





    

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/2394.html

分享给朋友:

“CSS中元素显示、隐藏及其应用_css隐藏元素的方法中可以触发点击事件” 的相关文章

5个看起来像 MacOS 的 Linux 发行版,赶紧收藏!

既想使用 Linux,又想同时使用 Mac ?那么你可以尝试这些 Linux 发行版,你肯定会觉得自己在用 Mac 系统。1. Elementry OSElementry OS 是看起来像 Mac OS 的最好的 Linux 发行版。和 Mac 一样,这个操作系统也是为了保护隐私而设计的。因此你会得...

7种超轻量级的Linux发行版,能够帮助你找到适合自己的操作系统

Linux是一种非常受欢迎的开源操作系统,而且有许多版本可以选择。有时候,你需要一种超轻量级的Linux发行版,它可以在资源有限的设备上运行,并且能够快速启动。本文将介绍7种超轻量级的Linux发行版,希望能够帮助你找到适合自己的操作系统。1. Tiny Core LinuxTiny Core Li...

vue项目-父页面数据变化使子页面更新的几种情况

当操作页面时候,特别是增删改操作之后,数据会有所改变,这个时候我们希望组件中的数据要和最新数据一致,就需要重新更新渲染。以下是针对几种不同情况下方式:一.子页面调用接口后重新渲染1.使用ref方式父组件中用ref=“xxx” 来声明子组件,然后通过在父组件值改变的地方来调用子组件中的方法this.$...

vue中如何在自定义组件上使用v-model和.sync

自定义事件tips推荐始终使用 kebab-case 的事件名。(v-on会将事件名自动转换为小写,避免匹配不到)changeData ×change-data √自定义组件的v-model用法:父组件定义数据源(不需要定义修改数据的方法),在子组件标签上通过v-model="data...

Windows 下 Git 拉 Gitlab 代码

读者提问:『阿常你好,Windows 下 Git 拉 Gitlab 代码的操作步骤可以分享一下吗?』阿常回答:好的,总共分为五个步骤。一、Windows 下安装 Git官网下载链接:https://git-scm.com/download/winStandalone Installer(安装版)注意...

K8s里我的容器到底用了多少内存?

作者:frostchen导语 Linux下开发者习惯在物理机或者虚拟机环境下使用top和free等命令查看机器和进程的内存使用量,近年来越来越多的应用服务完成了微服务容器化改造,过去查看、监控和定位内存使用量的方法似乎时常不太奏效。如果你的应用程序刚刚迁移到K8s中,经常被诸如以下问题所困扰:容器的...