hover后图片没变亮是因为brightness值写成了百分比字符串（如120%），而CSS filter只接受无单位数字（如1.2）；必须为图片设置transition且基础状态声明filter: brightness(1)，否则悬停时会跳变。

直接用 filter: brightness() 就能实现，但默认值是 brightness(1)（即 100% 亮度），不是 100% 字符串，写错就无效。

为什么 hover 后图片没变亮？

常见原因是把 brightness 值写成百分比字符串（如 brightness(120%)）——CSS filter 只接受无单位数字或小数，1.2 才对，120% 会被浏览器忽略。

• brightness(1) = 原始亮度（不推荐写成 100%）
• brightness(1.3) = 提亮 30%，视觉上自然
• brightness(0) = 全黑，brightness(2) = 过曝，慎用
• 必须给图片加 transition，否则变亮是瞬切，没有渐变效果

HTML + CSS 最简可用写法

不需要 JS，纯 CSS 即可。关键点：图片用 <img alt="如何利用HTML实现图片鼠标悬停变亮_通过CSS filter:brightness控制" > 标签，样式写在 class 里，hover 触发 filter 变化。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

<img src="photo.jpg" alt="示例图" class="hover-bright">

<style>
.hover-bright {
  transition: filter 0.3s ease;
}
.hover-bright:hover {
  filter: brightness(1.4);
}
</style>

• transition 必须写在非 hover 状态下，否则第一次悬停无动画
• 时间写 0.3s 比 0.5s 更跟手，超过 0.4s 容易觉得卡顿
• 如果图片是背景图（background-image），得套一层 <div>，不能直接对伪元素或 background 应用 <code>filter（部分旧版 Safari 不支持）

  兼容性与移动端注意事项

  filter 在 Chrome/Firefox/Safari（iOS 9.3+）都支持，但 Android WebView 4.4–6.0 有 bug：hover 不触发，需额外加 touchstart 模拟（实际项目中建议用 :active 降级）。

  立即学习“前端免费学习笔记（深入）”；

  • 真机测试时，iOS Safari 需要给图片容器加 cursor: pointer 才能激活 hover（否则只响应点击）
  • 避免和 transform 同时过渡——某些安卓机型会闪烁，可拆成两个独立 transition
  • 若同时用 grayscale() 或 contrast() 等其他 filter，注意它们会叠加：写成 filter: brightness(1.4) contrast(1.1)，别用多个 filter 声明覆盖

  最常被忽略的是 transition 的起点——很多人只写了 hover 状态的 filter，却忘了基础状态也要声明 filter（哪怕只是 filter: brightness(1)），否则从“无 filter”到“有 filter”会跳变。这个细节在快速滚动或高频悬停时特别明显。