看看http://www.kickstarter.com .
当您将鼠标悬停在他们的 Logo 上时，图像会亮起。如果不在悬停时使用不同的图像，这种效果是否可行？
我的第一个想法是使用 ::after:hover 并添加一个高透明度的白色方 block 来覆盖 Logo ，但是由于我的 Logo 放置在蓝色背景上，所以这不会工作。另一个想法是将不透明度设置为 0.9，并在悬停时将其设置为 1。但这会使图像在默认情况下看起来太暗。
最佳答案
您可以像这样使用 css 图像过滤器:
img:hover {-webkit-filter: brightness(150%); }
这有时看起来很有趣并且只能在 webkit 浏览器中工作，但这是我能想到的最好的解决方案。它还可以让您保留蓝色背景。
这是一个在蓝色背景上显示 Kickstarter Logo 的 jsfiddle。
干杯，
关于html - 悬停时点亮图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15275344/