如何利用HTML实现图片鼠标悬停变亮_通过CSS filter:brightness控制-html教程-PHP中文网

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

如何利用html实现图片鼠标悬停变亮_通过css filter:brightness控制

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

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

不需要 JS，纯 CSS 即可。关键点：图片用标签，样式写在 class 里，hover 触发 filter 变化。

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

@@##@@

<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），得套一层，不能直接对伪元素或 background 应用 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”会跳变。这个细节在快速滚动或高频悬停时特别明显。