Question

我的圈子嵌套在html中并且彼此居中。当我将鼠标悬停在第二大上方时，我想删除最大圆圈的框阴影悬停。当我将鼠标悬停在下一个连续的圆圈上时，它们会将鼠标悬停在前一个圆圈上。我尝试使用这个方框阴影取消悬停：无，但无济于事。我发布了我的html和css代码

<!-- language: lang-css -->

body, header {
    width: 760px;
    height: 760px;
    margin: 0 auto;
    }

.container {
    width: 760px;
    height: 760px;
    }   

.circle1 {
    background-image: url("images/circle4.svg");
    width: 100%;
    height: 100%;
    vertical-align: middle;
    border-radius: 50%;
    margin: 50px;
    display: inline-block;
    background-size: contain;
    opacity: 1;
    }   

.circle2 {
    background-image: url("images/circle3.svg");
    width: 75%;
    height: 75%;
    border-radius: 50%;
    position: relative;
    margin: 94px;
    display: inline-block;
    background-size: contain;
    opacity: 1;
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.6);
    transition: box-shadow 1s ease-in-out;
    }

.circle3 {
    background-image: url("images/circle2.svg");
    width: 60%;
    height: 60%;
    border-radius: 50%;
    position: relative;
    margin: 112px;
    display: inline-block;
    background-size: contain;
    opacity: 1;
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.6);
    transition: box-shadow 1s ease-in-out;
    }

.circle4 {
    background-image: url("images/circle1.svg");
    width: 40%;
    height: 40%;
    border-radius: 50%;
    position: relative;
    margin: 104px;
    display: inline-block;
    background-size: contain;
    opacity: 1;
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.6);
    transition: box-shadow 1s ease-in-out;
    }



.circle1:hover .circle2{
    box-shadow: 0px 0px 0px 100px rgba(255, 255, 255, .8);
}

.circle2:hover .circle3{
    box-shadow: 0px 0px 0px 117px rgba(255, 255, 255, .8);
}

.circle3:hover .circle4{
    box-shadow: 0px 0px 0px 105px rgba(255, 255, 255, .8);
}

.circle2:hover .circle1{
    box-shadow: none;
}

.circle3:hover .circle2{
    box-shadow: none;
}

.circle4:hover .circle3{
    box-shadow: none;
}

 <!DOCTYPE HTML>

<head>

    <title>
        My Website!
    </title>
    <link rel="stylesheet" type="text/css" href="homestyle.css" />

</head>

<body>


    <header>

        <div class="container">
            <div class="circle1">
                <div class="circle2">
                    <div class="circle3">
                        <div class="circle4">


                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>



</body>
</html>

如何在悬停在嵌套div上时从div中删除盒子阴影悬停？

0 个答案: