跳转到主内容
极星编程网:以代码为星,赴技术山海!

css怎么实现鼠标经过隐藏显示样式

在CSS中,可以利用“:hover”选择器和display属性来实现鼠标经过隐藏显示样式;只需要利用“:hover”选择器选择鼠标指针浮动在上面的元素,并给该状态的元素设置“display:none;”样式即可,语法“指定元素:hover {display:none;}”。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。 在CSS中,可以利用“:hover”选择器和display属性来实现鼠标经过隐藏显示样式。 只需要利用“: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: 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更 下载
.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 样式:
“display:none;”样式 display:none可以不占据空间,把元素隐藏起来,所以动态改变此属性时会引起重排(改变页面布局),可以理解成在页面中把该元素删除掉一样;不会被子孙继承,但是其子孙是不会显示的,毕竟都一起被隐藏了。
正常显示元素
隐藏元素
正常显示元素
(学习视频分享: web前端 )

相关文章