- 所在位置：
- 首页 >
- 编程技术 >
- CSS/HTML >
- CSS中元素点击隐藏的效果怎么写
CSS中元素点击隐藏的效果怎么写
Admin 2022-05-25 群英技术资讯 1342 次浏览
今天就跟大家聊聊有关“CSS中元素点击隐藏的效果怎么写”的内容，可能很多人都不太了解，为了让大家认识和更进一步的了解，小编给大家总结了以下内容，希望这篇“CSS中元素点击隐藏的效果怎么写”文章能对大家有帮助。在css中，点击隐藏的代码为“元素:active{opacity:0;}”；“:active”选择器用于选择元素被点击时的状态并设置样式，opacity属性用于设置元素的不透明级别，也就是当点击元素时，元素隐藏不显示。
本教程操作环境：windows10系统、CSS3&&HTML5版、Dell G3电脑。
css点击隐藏的代码是什么
在css中，可以利用:active选择器和opacity属性来实现点击隐藏效果，
:active 选择器用于选择活动链接。
当您在一个链接上点击时，它就会成为活动的（激活的）。
opacity 属性设置元素的不透明级别。
具体语法为：
元素:active{opacity: 0; }示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{
width: 380px;
height: 250px;
background-image: url(1118.02.png);
}
div:active{
opacity: 0;
}
</style>
</head>
<body>
<div>鼠标点击div盒子</div>
</body>
</html>输出结果：
以上就是关于“CSS中元素点击隐藏的效果怎么写”的介绍了，感谢各位的阅读，如果大家想要了解更多相关的内容，欢迎关注群英网络，小编每天都会为大家更新不同的知识。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
浅谈HTML中form表单标签的简单使用是怎样
HTML中form表单标签的简单使用是怎样？今天来学习下关于HTML中的form表单标签的相关内容，在HTML标记语言中经常用到，如果你是小白的话，小编接下来分享的内容你一定不要错过了。
-
HTML5项目中本地文件读写的方法操作是什么
最近有这样一个需求就是如何读取或写入本地文件系统中的文件， html5来了它提供了一套文件系统的API，可以实现文件读写，本文就介绍了如何实现本地文件的读取和写入，感兴趣的可以了解一下
-
CSS中word-break属性能用于做什么，具有哪些值
word-break属性用于设置HTML页面中文本内容自动转换的处理方法。使用特定的属性值设置，可以通知浏览器实现任意位置的换行。word-break属性有三个值：normal、break-all、keep-all。
-
HTML表格标签tr、td、th的用法是什么样的
表格是html中经常使用到的，简单的使用可能很多人都没问题，但是更深入的了解的人恐怕不多，下面我们先来看一下如何使用。<table>是<tr>的上层标签<tr>必须在一个<table></table>里面,它不能单独使用,相当于<table>的属性标签. <table>标示一个表格,<tr&am
-
HTML如何设定标题水平对齐，用什么方法呢？
不少朋友都想知道在HTML表格标记中标题水平对齐属性、语法那些是怎样的？带着这个问题，爱站技术频道小编特地整理了相关资料，希望能帮助到朋友们。
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册关注或联系群英网络
7x24小时售前：400-678-4567
7x24小时售后：0668-2555666
24小时QQ客服
群英微信公众号
CNNIC域名投诉举报处理平台
服务电话：010-58813000
服务邮箱：service@cnnic.cn
投诉与建议：0668-2555555
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 ICP核准（ICP备案）粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
