悬停效果

本课属于 Coddy HTML 学习旅程的“精通 CSS”单元。第 8 课，共 43 课。

:hover 伪类可以在用户将鼠标悬停在元素上时更改元素的样式。

下面是一个简单的示例，鼠标悬停在按钮上时，文字颜色会改变：

button {
  color: black;
}

button:hover {
  color: red;
}

在这个示例中，按钮文字默认是黑色的，但鼠标悬停在按钮上时，文字会变成红色。

挑战

简单

你有一个按钮，需要在鼠标悬停时改变样式。你的任务是：

使用 :hover 伪类，在用户将鼠标悬停在按钮上时，将按钮的背景颜色改为绿色。
在悬停效果中为按钮添加阴影，让它看起来像是被抬起了一样。像这样使用 box-shadow：

box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);

这会添加带有偏移、模糊效果和颜色的阴影。

亲手试试

<html>
<head>
    <title>Hover Effects</title>
    <style>
        .hover-button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
        }
        /* CSS solution goes here */
        
    </style>
</head>
<body>
    <button class="hover-button">Hover over me!</button>
</body>
</html>