我如何像 has() 选择器一样选择特定元素周围的所有元素,但在各个方向

问题描述 投票:0回答:1
css css-selectors
1个回答
0
投票
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0; /* Added background color for contrast */
}

#container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    width: 90%; /* Added width constraint */
    perspective: 1000px;
}

.box {
    background-color: red;
    height: 50px;
    width: 50px;
    transform-style: preserve-3d;
    transition: transform 0.5s, filter 0.3s;
}

.box:hover {
    transform: translateZ(150px);
    filter: brightness(1);
    background-color: #87F1FF;
}

.box:hover + .box {
    transform: translateZ(100px) rotateY(60deg);
    filter: brightness(0.8);
}

.box:hover + .box + .box {
    transform: translateZ(50px) rotateY(30deg);
    filter: brightness(0.6);
}

.box:hover + .box + .box + .box {
    transform: translateZ(25px) rotateY(15deg);
    filter: brightness(0.4);
}

/* Hover effect for previous siblings */
.box:has(+ .box:hover) {
    transform: translateZ(100px) rotateY(-60deg);
    filter: brightness(0.8);
}

.box:has(+ .box + .box:hover) {
    transform: translateZ(50px) rotateY(-30deg);
    filter: brightness(0.6);
}

.box:has(+ .box + .box + .box:hover) {
    transform: translateZ(25px) rotateY(-15deg);
    filter: brightness(0.4);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hovering Boxes</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="container"></div>
    <script>
        // Create 100 boxes and append them to the container
        const container = document.getElementById('container');
        const boxCount = 100;

        for(let i = 0; i < boxCount; i++) {
            const box = document.createElement('div');
            box.className = 'box';
            container.appendChild(box);
        }
    </script>
</body>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.