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

css3怎么实现鼠标滑过隐现效果,第1张

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

在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>

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

以上就是css3怎么实现鼠标滑过隐现效果的详细内容,

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/699209.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-23
下一篇 2022-04-23

发表评论

登录后才能评论

评论列表(0条)

保存