站长资讯网
最全最丰富的资讯网站

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

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

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

前端(vue)入门到精通课程:进入学习
API 文档、设计、调试、自动化测试一体化协作工具:点击使用

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

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

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

<!DOCTYPE html> <html> 	<head> 		<style> 			div { 				width: 520px; 				height: 50px; 				background-color: #008000; 				 			} 			div:hover { 				display:none; 			} 		</style> 	</head> 	<body> 		<div> 			hello 		</div> 	</body> </html>

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

说明:

: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代码:

<body>     <div class="btn stop">stop</div>     <div class="animation"></div> </body>

css样式:

<style>     .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;     } </style>

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

“display:none;”样式

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

<!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">         <style>             .display{                 display:none;             }         </style>     </head>     <body>         <div>正常显示元素</div>         <div class="display">隐藏元素</div>         <div>正常显示元素</div>     </body> </html>

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

(学习视频分享:web前端)

赞(0)
分享到: 更多 (0)