• 技术文章 >web前端 >前端问答

    css3怎么实现鼠标滑过隐现效果

    青灯夜游青灯夜游2022-03-07 16:23:28原创44

    在css3中,可以利用“:hover”选择器和display属性来实现鼠标滑过隐现效果,只需要给元素添加“元素:hover{display:none;}”样式即可。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    css3实现鼠标滑过隐现效果

    在css3中,可以利用“:hover”选择器和display属性来实现鼠标滑过隐现效果。

    只需要使用“:hover”选择器选中鼠标滑上元素的状态,并添加“display:none;”样式,隐藏元素即可。

    这样在鼠标滑上元素时,隐藏元素;鼠标滑出元素时,显现元素。

    <!DOCTYPE html>
    <html>
    	<head>
    		<style>
    			div {
    				width: 520px;
    				height: 50px;
    				background-color: #008000;
    				/* display: block; */
    				
    			}
    			div:hover{
    				display:none;
    			}
    		</style>
    	</head>
    	<body>
    		<div>
    		</div>
    	</body>
    </html>

    1.gif

    (学习视频分享:css视频教程

    以上就是css3怎么实现鼠标滑过隐现效果的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css3 鼠标滑过 隐藏
    上一篇:vue怎么将数组转为字符串 下一篇:css3能不能实现三角形
    PHP编程就业班

    相关文章推荐

    • css3新增的背景属性有哪些• transform是css3新增的属性吗• css3中用什么来定义过渡动画的时间• css3实现多栏布局有哪几种方法• css3两种盒模型的区别是什么• css3中vh和wh是什么单位

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网