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

106 阅读 0 评论 70 点赞

我是靠谱客的博主开放保温杯，最近开发中收集的这篇文章主要介绍css怎么实现鼠标经过隐藏显示样式，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本教程操作环境：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>
登录后复制

说明：

:hover 选择器

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

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

用法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>
登录后复制

“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>
登录后复制