CSS:在悬停时减轻元素

Question

假设一个元素处于 100% 饱和度、不透明度等...我怎样才能让它的背景在鼠标悬停时变得稍微亮一些？

用例是我允许用户将鼠标悬停在页面上的任何元素上。我不想在 80% 的不透明度下四处确定每种颜色。

一种方法是更改​​ opacity: 0.4 但我只想更改背景。

Answer 1

这是很久以前的事了，但你可以这样做:

.element {
    background-color: red;
}
.element:hover {
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
}

您可以将 100px 更改为您想要的数字。我拿了一个大的来覆盖整个元素。

这不是一个非常漂亮的解决方案，但它确实有效!

这里有一个例子:http://jsfiddle.net/6nkh3u7k/5/