CSS: hover挑选器的应用详解

日期：2021-01-20 类型：科技新闻我要分享

关键词：商城网站建设，微商好助手，微商引流，电商网站模板，微信商家小程序

一些情况下必须用到mouseover和mouseout这两个电脑鼠标恶性事件，可是写js又较为不便，还要加上监视恶性事件，因此能用css处理的物品尽可能yongcss处理，这样能够提升特性，下面说1下我对:hover 的掌握:
以前在学测算机运用的情况下，老师教大家应用了: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下：

1. 正中间甚么都不加操纵子元素；
2. ‘+’ 操纵同级元素（弟兄元素）；
3. ‘～’ 操纵就近元素；

案例

用1个按钮操纵1个盒子的健身运动情况，当电脑鼠标移到按钮上方时，盒子终止健身运动，电脑鼠标移开时，盒子再次健身运动

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(⑴00px, 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>

完成实际效果：

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

上一篇：运用CSS3 动漫美术绘画圆形动态性数字时钟返回下一篇：没有了