实现方法:1、给元素添加“display: none;”样式,将元素先隐藏起来;2、使用“:hover”选择器和“display:block;”样式设置鼠标经过显示效果,语法“父元素:hover 元素{display:block;}”。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
css实现鼠标经过显示离开隐藏效果
实现思想:
先将元素隐藏起来;
然后使用“:hover
”选择器设置鼠标经过样式--显示元素
实现代码:
<!DOCTYPE html> <html> <head> <style> div { width: 520px; height: 50px; background-color: #008000; } span{ color: azure; display: none; } div:hover span{ display:block; } </style> </head> <body> <div> <span>hello</span> </div> </body> </html>
效果图:
(学习视频分享:css视频教程)
以上是css怎么实现鼠标经过显示离开隐藏效果的详细内容。更多信息请关注PHP中文网其他相关文章!