图像-悬停图像时文本更改颜色

基础概念

悬停图像时文本更改颜色是一种常见的用户界面（UI）交互效果，通常用于增强用户体验。当用户将鼠标悬停在图像上时，相关的文本会改变颜色，以提供视觉反馈，表明该图像是可交互的。

类型

纯CSS实现：通过CSS伪类:hover来实现。
JavaScript辅助：结合JavaScript来处理更复杂的交互效果。

应用场景

网页导航菜单中的图标和文本。
图片库中的缩略图和描述文本。
社交媒体中的用户头像和用户名。

示例代码（纯CSS实现）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hover Effect Example</title>
    <style>
        .image-container {
            display: inline-block;
            position: relative;
        }
        .image-container img {
            width: 200px;
            height: 200px;
        }
        .image-text {
            position: absolute;
            bottom: 0;
            width: 100%;
            text-align: center;
            background-color: rgba(0,0,0,0.5);
            color: white;
            opacity: 0;
            transition: opacity 0.5s;
        }
        .image-container:hover .image-text {
            color: red;
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="image-container">
        <img src="https://via.placeholder.com/200" alt="Placeholder Image">
        <div class="image-text">Hover over me!</div>
    </div>
</body>
</html>