用css :hover改border-color需先设初始边框，否则悬停无效；推荐加transition实现平滑过渡，并用box-sizing:border-box避免尺寸变化；语义化场景宜用figure包裹并作用于容器；移动端需注意:hover兼容性。
直接用 CSS 的 :hover 伪类改 border-color 就行，关键是要给图片先设好边框（哪怕初始是透明或浅色），否则悬停时没变化。
基础写法：单张图片悬停变红边框
确保图片有明确的 border 样式，再定义 hover 效果：
- HTML 中用
<img>标签，不需额外包裹（除非需要语义化或联动文字） - CSS 中设置初始边框，比如
border: 2px solid #ddd - 加上
transition让颜色变化更平滑（可选但推荐）
示例代码：
img {
border: 2px solid #ccc;
transition: border-color 0.2s;
}
img:hover {
border-color: red;
}
带语义或图文联动的写法
如果图片和文字属于同一逻辑单元（比如一个作品项、一张卡片），建议用语义化容器包裹，让悬停区域更合理：
- 用
<figure></figure>包裹<img>和<figcaption></figcaption>，更符合语义 - 把 hover 写在容器上，同时控制图片边框和文字颜色
- 避免只给
<img>加 hover，而文字在外部——那样悬停文字时边框不会响应
示例：
figure {
display: inline-block;
}
figure img {
border: 3px solid #999;
vertical-align: top;
}
figure:hover img {
border-color: red;
}
figure:hover figcaption {
color: red;
}
注意几个易错点
-
边框影响尺寸：默认 box-sizing 是 content-box，加 3px 边框会让图片实际宽高变大。加
box-sizing: border-box可让 50px × 50px 的设定真正生效 -
没有初始边框 = 悬停无效：如果只写
img:hover { border: 2px solid red; }，首次悬停会“闪一下”（因为从无边框到有边框），应始终先定义 border -
移动端兼容性：:hover 在触摸设备上行为不一致（通常只在点击后触发一次），如需全平台一致，可配合 JavaScript 监听
touchstart做降级处理
扩展：多个图片统一控制
若页面有多个图片要统一管理，可用 class 分组：
- 给所有目标图片加 class，如
class="hover-border" - CSS 写
.hover-border { border: 2px solid #eee; }和.hover-border:hover { border-color: #e33; - 这样既清晰又方便后期批量调整
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
