CSS■完成电脑鼠标悬停更改别的标识款式的实例

2021-01-20 23:57 jianzhan

序言：

        据我掌握现阶段CSS只有操纵悬停时更改该标识下边的弟兄标识和子标识款式，若有巨头有好的方式请赐教！
操纵别的标识（依据操纵标识与被测制标识中间的关联）可分成三类型型以下：

  • 文中中控台制标识为 .div1
  • 被测制标识为 .div2

1.操纵子标识（.div1:hover和.div2中间应用空格符）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .div1,.div2 {
                width: 200px;
                height: 100px;
                background-color: pink;
            }
            .div2 {
                background-color: aqua;
                display: none;
            }
            .div1:hover .div2 {
                display: block;
            }
        </style>
    </head>
    <body>
        <div class="div1">div1
            <div class="div3">div3</div>
            <div class="div2">div2</div>
        </div>
    </body>
</html>

被测制标识要是是操纵标识的子标识便可以，里有别的标识（如.div3）不容易危害实际效果！

2.操纵弟兄标识（.div1:hover和.div2中间应用+）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .div1,.div2 {
                width: 200px;
                height: 100px;
                background-color: pink;
            }
            .div2 {
                background-color: aqua;
                display: none;
            }
            .div1:hover+.div2 {
                display: block;
            }
        </style>
    </head>
    <body>
        <div class="div1">div1</div>
        <!-- <div class="div3">div3</div> -->
        <div class="div2">div2</div>
    </body>
</html>

应用“+”时，.div2务必紧贴在.div屁股后边才会出现实际效果，不然失效！！！比如：将.div3撤销注解后，.div1将没法操纵.div2的款式！！！假如操纵标识和被测制标识正中间有內容，必须依照第三种方法写！

3.操纵弟兄标识（正中间有內容）（.div1:hover和.div2中间应用~）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .div1,.div2 {
                width: 200px;
                height: 100px;
                background-color: pink;
            }
            .div2 {
                background-color: aqua;
                display: none;
            }
            .div1:hover~.div2 {
                display: block;
            }
        </style>
    </head>
    <body>
        <div class="div1">div1</div>
        <div class="div3">div3</div>
        <div class="div2">div2</div>
    </body>
</html>

这类方式的应用规定是被测制标识务必在操纵标识的下边，正中间能够有随意內容。

小结：

操纵子标识

正中间应用空格符

操纵紧贴后边的弟兄标识

正中间应用“+”

操纵后边随意弟兄标识

正中间应用“~”

到此这篇有关CSS完成电脑鼠标悬停更改别的标识款式的实例编码的文章内容就详细介绍到这了,大量有关css电脑鼠标悬停更改款式內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！

为您推荐