Netflix克隆开发：如何实现hover时同时高亮图片边框与用户名

这个需求完全可以用纯CSS实现，不需要引入JavaScript，核心逻辑是将hover事件绑定到包裹头像和用户名的公共父容器上，这样鼠标进入父容器任意区域就能同时控制两个子元素的样式。

需先修正的现有代码问题 #

• HTML中多个<p>标签共用id="user"，违反id唯一性规范，需要将id改为class。
• 现有hover样式仅绑定在img元素本身，无法触发用户名的同步变化。

具体修改代码 #

HTML修改

把所有用户名下的p标签

<p class="prfImg" id="user">A name</p>

替换为：

<p class="user">A name</p>

CSS修改

删除原有.prfImg > img:hover和#user相关规则，替换为以下代码：

/* 用户名基础样式 */
.user {
    font-size: 25px;
    color: grey;
    margin: 8px 0 0 0;
}

/* 父容器hover时同步修改头像样式 */
.prfImg:hover > img {
    color: rgba(255, 255, 255, 0.787);
    border: 3px solid rgba(255, 255, 255, 0.787);
    border-radius: 3px;
}

/* 父容器hover时同步修改用户名样式 */
.prfImg:hover .user {
    color: rgba(255, 255, 255, 0.787);
}

修改完成后，只要鼠标进入.prfImg容器的任意范围（包括头像、用户名、两者之间的空白区域），头像边框和用户名都会同步高亮，和Netflix官方效果一致。

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