• 技术文章 >web前端 >前端问答

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

    青灯夜游青灯夜游2022-09-22 17:49:56原创255

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

    大前端成长进阶课程:进入学习

    本教程操作环境: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>

    1.gif

    说明:

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

    2.gif

    “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>

    (学习视频分享:web前端

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

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css
    上一篇:css中img不知道宽高怎么实现居中 下一篇:HTML/CSS文本输入框有哪些属性
    VIP课程(WEB全栈开发)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• 在css中什么属性用于清除浮动• css可以加载图片吗• css中translate是什么意思• css选择器不可以是标签的名字吗• css中id选择符的标识是什么
    1/1

    PHP中文网