技术问询：如何构建并操控4个大小翻倍的HTML/CSS正方形颜色？

我来帮你搞定这个需求！下面是完整的实现方案，包含HTML结构、CSS样式以及悬停交互逻辑，你可以直接复制代码运行，效果立马就能看到：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colorful Squares Hover Effect</title>
    <style>
        /* 定义每个正方形的颜色变量，方便维护和引用 */
        :root {
            --color1: #ff6b6b;
            --color2: #4ecdc4;
            --color3: #45b7d1;
            --color4: #96ceb4;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f7f7f7;
        }

        /* 正方形容器，横向排列 */
        .square-container {
            display: flex;
            gap: 20px; /* 正方形之间的间距 */
            align-items: flex-end; /* 让底部对齐，视觉上更整齐 */
        }

        /* 正方形基础样式 */
        .square {
            transition: background-color 0.3s ease; /* 颜色过渡动画，可选 */
        }

        /* 逐个设置正方形的大小和初始颜色 */
        .square:nth-child(1) {
            width: 2px;
            height: 2px;
            background-color: var(--color1);
        }

        .square:nth-child(2) {
            width: 4px;
            height: 4px;
            background-color: var(--color2);
        }

        .square:nth-child(3) {
            width: 8px;
            height: 8px;
            background-color: var(--color3);
        }

        .square:nth-child(4) {
            width: 16px;
            height: 16px;
            background-color: var(--color4);
        }

        /* 悬停时切换为相邻正方形的颜色 */
        .square:nth-child(1):hover {
            background-color: var(--color2); /* 第一个悬停取第二个的颜色 */
        }

        .square:nth-child(2):hover {
            background-color: var(--color1); /* 第二个悬停取第一个的颜色，也可以改成var(--color3)取第三个 */
        }

        .square:nth-child(3):hover {
            background-color: var(--color4); /* 第三个悬停取第四个的颜色 */
        }

        .square:nth-child(4):hover {
            background-color: var(--color3); /* 第四个悬停取第三个的颜色 */
        }
    </style>
</head>
<body>
    <div class="square-container">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
    </div>
</body>
</html>

关键部分解释 #

1. HTML结构 #

用一个<div class="square-container">作为容器包裹四个<div class="square">，结构简洁清晰，方便统一控制布局和样式。

2. 基础样式与大小控制 #

• 我用CSS变量--color1到--color4定义了四个不同的颜色，后续修改颜色只需要改这里，不用逐个修改每个正方形的样式；
• 通过:nth-child()伪类给每个正方形设置依次翻倍的尺寸：第一个2px×2px，第二个4px，第三个8px，第四个16px；
• 容器用display: flex让正方形横向排列，加上gap设置间距，底部对齐的处理让视觉效果更整齐。

3. 悬停交互逻辑 #

核心就是利用CSS变量的可引用特性，当鼠标悬停在某个正方形上时，把它的背景色替换为相邻正方形的颜色变量：

• 第一个正方形悬停时，切换为第二个的颜色；
• 第二个正方形我设置的是切换为第一个的颜色，你也可以改成var(--color3)来取第三个的颜色，完全看你需求；
• 第三个和第四个同理，分别切换为右边和左边相邻的颜色；
• 我还加了transition过渡动画，让颜色变化更平滑，如果你不需要可以直接删掉这行代码。

内容的提问来源于stack exchange，提问作者schizoid