CSS 悬停时使上一个元素改变颜色

在网页开发中，悬停效果是提升用户交互体验的常见技巧之一。当用户鼠标悬停在某个元素上时，我们可以通过改变元素的样式来吸引用户的注意力。本文将介绍如何使用 CSS 实现当用户悬停在一个元素上时，让这个元素的上一个元素改变颜色的效果。

HTML 结构

首先，我们需要一个简单的HTML结构来演示这个效果。我们将创建一个包含两个 div 元素的简单示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Hover Effect</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

在这个示例中，我们有一个名为 container 的父级容器，它包含两个同级的 box 元素。

CSS 样式

接下来，我们来编写 CSS 样式，实现当用户悬停在第二个 box 元素上时，第一个 box 元素改变颜色的效果。我们可以使用 CSS 选择器中的 + 符号来选择元素的相邻兄弟元素。下面是我们的样式表：

.container {
    display: flex;
}

.box {
    width: 100px;
    height: 100px;
    background-color: #ccc;
    margin: 10px;
    transition: background-color 0.3s;
}

.box:hover + .box {
    background-color: #f00;
}

在这个样式中，我们首先将 .container 设置为 flex 布局，使两个 box 元素水平排列。然后，我们设置 box 元素的宽度、高度和背景颜色，并添加了过渡效果。当用户悬停在第一个 box 元素上时，我们使用 box:hover + .box 选择器来选择第一个 box 元素的兄弟元素，即第二个 box 元素，并改变它的背景颜色为红色。

实例演示

现在，让我们运行这个示例，看看效果如何：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Hover Effect</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

.container {
    display: flex;
}

.box {
    width: 100px;
    height: 100px;
    background-color: #ccc;
    margin: 10px;
    transition: background-color 0.3s;
}

.box:hover + .box {
    background-color: #f00;
}

在浏览器中打开上述 HTML 文件，鼠标悬停在第一个 box 元素上时，第二个 box 元素的背景颜色会变为红色，形成了我们想要的效果。

通过上面的示例，我们成功地实现了当用户悬停在一个元素上时，让这个元素的上一个元素改变颜色的效果。这种技巧可以为网页增添交互性和动态性，提升用户体验。