HTML实现图片与文本联动hover效果（非表格方式）

原代码里图片和文本是两个独立的<a>标签，互相没有关联，所以悬停图片时没法让文本跟着变色。解决思路是把它们放到同一个父容器里，通过父容器的hover状态来控制文本样式，不用表格也能实现联动。

以下是修改后的完整代码：

<html>
<head>
    <style>
        /* 基础链接样式 */
        a:link, a:visited {
            color: black;
            text-decoration: none;
        }

        /* 狗狗卡片容器 */
        .dog-card {
            width: 200px;
            margin: 60px 0 0 50px;
        }

        /* 图片样式 */
        .dog-card .dog-img {
            display: block;
            width: 200px;
            height: 300px;
            border-radius: 15px 15px 0 0;
            border: none;
        }

        /* 文本信息样式 */
        .dog-card .name {
            display: block;
            font-size: 20px;
            color: black;
            font-family: montserrat;
            border: 1px solid lightgray;
            padding: 27.5px;
            border-radius: 0 0 15px 15px;
        }

        /* 悬停联动效果：当卡片（含图片）被悬停时，文本变色 */
        .dog-card:hover .name {
            color: #327da8;
        }
    </style>
</head>
<body>
    <div class="dog-card">
        <a href="file:///C:/Users/del0044/OneDrive/HTML%20Coding/PupLove/PupLoveNala.html">
            <img class="dog-img" src="https://i.pinimg.com/originals/2d/6f/8e/2d6f8ef1a4c976ce5e2a9eea5980ec92.jpg" alt="Nala">
        </a>
        <a class="name" href="file:///C:/Users/del0044/OneDrive/HTML%20Coding/PupLove/PupLoveLana.html">
            Nala <br><br> 
            Breed: Golden <br> 
            Retriever <br><br> 
            Sex: Female
        </a>
    </div>
</body>
</html>

关键修改说明：

• 新增.dog-card父容器，把图片和文本链接整合为一个整体，布局更稳定
• 移除了原代码中容易导致布局错位的position:absolute，改用固定宽度+外边距控制位置
• 用.dog-card:hover .name选择器，实现鼠标悬停在卡片任意区域（包括图片）时，文本链接自动变色
• 修正了原CSS里的错误：font-color是无效属性，统一用color控制文本颜色
• 给图片添加了alt属性，符合网页 accessibility 规范

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