css怎么实现鼠标经过隐藏显示样式-前端问答

在CSS中，可以利用“:hover”选择器和display属性来实现鼠标经过隐藏显示样式；只需要利用“:hover”选择器选择鼠标指针浮动在上面的元素，并给该状态的元素设置“display:none;”样式即可，语法“指定元素:hover{display:none;}”。

前端（vue）入门到精通课程：API文档、设计、调试、自动化测试一体化协作工具：

本教程操作环境：windows7系统、CSS3&&HTML5版、DellG3电脑。

在CSS中，可以利用“:hover”选择器和display属性来实现鼠标经过隐藏显示样式。

只需要利用“:hover”选择器选择鼠标指针浮动在上面的元素，并给该状态的元素设置“display:none;”样式，让其隐藏即可。

hello

:hover选择器用于选择鼠标指针浮动在上面的元素。

提示：:hover选择器可用于所有元素，不只是链接。

在CSS定义中，:hover必须位于:link和:visited之后（如果存在的话），这样样式才能生效。

:link选择器设置指向未被访问页面的链接的样式，:visited选择器用于设置指向已被访问的页面的链接，:active选择器用于活动链接。

这个表示的是：当鼠标悬浮在a这个样式上的时候，a的背景颜色设置为黄色

a:hover{background-color:yellow;}

这个是最普通的用法了，只是通过a改变了style

使用a控制其他块的样式：

使用a控制a的子元素b：

.a:hover.b{background-color:blue;}

使用a控制a的兄弟元素c(同级元素)：

.a:hover.c{color:red;}

使用a控制a的就近元素d：

1.中间什么都不加控制子元素；

2.‘’控制同级元素（兄弟元素）；

用一个按钮控制一个盒子的运动状态，当鼠标移到按钮上方时，盒子停止运动，鼠标移开时，盒子继续运动

display:none可以不占据空间，把元素隐藏起来，所以动态改变此属性时会引起重排（改变页面布局），可以理解成在页面中把该元素删除掉一样；不会被子孙继承，但是其子孙是不会显示的，毕竟都一起被隐藏了。

正常显示元素隐藏元素正常显示元素

（学习视频分享：）

以上就是css怎么实现鼠标经过隐藏显示样式的详细内容，更多请关注php中文网其它相关文章！

程序员必备接口测试调试工具：

主讲：Peter-Zhu轻松幽默、简短易学，非常适合PHP学习入门

主讲：灭绝师太由浅入深、明快简洁，非常适合前端学习入门

主讲：西门大官人思路清晰、严谨规范，适合有一定web编程基础学习

主讲：博愿全栈工程师，拼命探索，不计后果

主讲：西门大官人思路清晰、严谨规范，适合有一定web编程基础学习

主讲：Peter-Zhu、西门大官人、灭绝师太、欧阳克

今天学习一小步，明天提升一大步

---

---

相关标签： css、

上一篇：css在web中的作用是什么前端问答