在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、西门大官人、灭绝师太、欧阳克
今天学习一小步,明天提升一大步
本文地址: http://www.77uz.com/jishuwz/4.html
上一篇:css在web中的作用是什么前端问答...