在CSS中，可以利用“:hover”选择器和display属性来实现鼠标经过隐藏显示样式；只需要利用“:hover”选择器选择鼠标指针浮动在上面的元素，并给该状态的元素设置“display:none;”样式即可，语法“指定元素:hover {display:none;}”。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
在CSS中，可以利用“:hover”选择器和display属性来实现鼠标经过隐藏显示样式。
只需要利用“:hover”选择器选择鼠标指针浮动在上面的元素，并给该状态的元素设置“display:none;”样式，让其隐藏即可。
nbsp;html>div {width: 520px;height: 50px;background-color: #008000;}div:hover {display:none;}hello
登录后复制
立即学习“前端免费学习笔记（深入）”；
说明：
:hover 选择器
:hover 选择器用于选择鼠标指针浮动在上面的元素。
提示：:hover 选择器可用于所有元素，不只是链接。
在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。
:link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active 选择器用于活动链接。
用法1：
这个表示的是：当鼠标悬浮在a这个样式上的时候，a的背景颜色设置为黄色
a:hover { background-color:yellow; }
登录后复制
这个是最普通的用法了，只是通过a改变了style
用法2:
使用a 控制其他块的样式：
使用a控制a的子元素 b：
.a:hover .b { background-color:blue; }
登录后复制
使用a控制a的兄弟元素 c(同级元素)：
.a:hover + .c { color:red; }
登录后复制
使用a控制a的就近元素d：
.a:hover ~ .d { color:pink; }
登录后复制
总结一下：
1. 中间什么都不加 控制子元素；
2. ‘+’ 控制同级元素（兄弟元素）；
3. ‘～’ 控制就近元素；
实例
用一个按钮控制一个盒子的运动状态，当鼠标移到按钮上方时，盒子停止运动，鼠标移开时，盒子继续运动
body代码：
stop
登录后复制
css样式：
.animation { width: 100px; height: 100px; background-color: pink; margin: 100px auto; animation: move 2s infinite alternate; -webkit-animation: move 2s infinite alternate; } @keyframes move { 0% { transform: translate(-100px, 0); } 100% { transform: translate(100px, 0); } } .btn { padding: 20px 50px; background-color: pink; color: white; display: inline-block; } .stop:hover ~ .animation { -webkit-animation-play-state: paused; animation-play-state: paused; }
登录后复制
“display:none;”样式
display:none可以不占据空间，把元素隐藏起来，所以动态改变此属性时会引起重排（改变页面布局），可以理解成在页面中把该元素删除掉一样；不会被子孙继承，但是其子孙是不会显示的，毕竟都一起被隐藏了。
nbsp;html> .display{ display:none; } 正常显示元素 隐藏元素 正常显示元素
登录后复制
（学习视频分享：web前端）
以上就是css怎么实现鼠标经过隐藏显示样式的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2925735.html
