适合初学者的HTML鼠标滑过图片边框高亮代码-html教程-PHP中文网

让鼠标悬停时图片边框亮起需设 display: block、border 初始为 transparent、用 transition 实现平滑变化，并注意移动端:focus兼容和颜色对比度。

适合初学者的html鼠标滑过图片边框高亮代码

怎么让鼠标悬停时图片边框亮起来

直接加 border 和 :hover 就行，但初学者常写完没反应——多半是忘了给图片设 display: block 或者边框默认是透明的。

HTML 中图片默认是 inline 元素，上下有空白，border 会错位，加 display: block 最稳
别只写 border: 2px solid，不指定颜色浏览器可能渲染成黑色或不可见，必须写全，比如 border: 2px solid #007bff
想过渡更顺滑？补一句 transition: border-color 0.3s，不然边框会“啪”一下跳变

最简可用代码长什么样

复制粘贴就能用，不用改结构，也不依赖外部库：

@@##@@

<style>
.highlight-border {
  display: block;
  border: 2px solid transparent;
  transition: border-color 0.3s;
}
.highlight-border:hover {
  border-color: #007bff;
}
</style>

注意：transparent 是关键——初始边框存在但不可见，:hover 才换颜色，否则第一次悬停会“闪一下”（从无到有触发重排）。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

为什么用 `border` 不用 `outline`

outline 确实也能高亮，但它不占布局空间、无法圆角、不能单独控制某一边，还容易和焦点样式冲突。对初学者来说，border 更直观可控。

outline 会叠加在元素外侧，可能遮挡相邻内容；border 属于盒模型一部分，位置稳定
想加圆角？加 border-radius: 4px 即可，outline 不支持这个属性
如果图片本身有 max-width: 100% 响应式设置，border 会自动随缩放变化，outline 容易显得粗细不均

移动端点按没效果？加这行就解决

iOS Safari 和部分安卓浏览器默认不触发 :hover，除非用户真“悬停”。点按图片时需要模拟，最轻量办法是加 cursor: pointer 并确保元素可聚焦：

给 img 加 tabindex="0"，让它能接收焦点
再补一条 CSS：.highlight-border:focus { border-color: #007bff; }
或者更简单：在里加 <meta name="viewport" content="width=device-width, initial-scale=1">，并确保没禁用缩放（有些页面会加 user-scalable=no，这会让 :hover 失效）

真正麻烦的不是代码多，而是边框颜色和背景色对比不够——尤其浅灰背景上用浅蓝边框，根本看不出来。调色前先在真实页面里拖动图片试试亮度差。