CSS: hover挑选器的应用详解

日期:2020-09-19 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

一些情况下必须用到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>

完成实际效果:

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