CSS:减轻悬停时的元素 [英] CSS: lighten an element on hover

问题描述

假设某个元素处于100％饱和度，不透明度等状态，那么当我将其背景悬停时该如何使其变得更浅?

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

一种方法是更改​​opacity: 0.4，但我只希望更改背景.

解决方案

很久以前，但是您可以执行以下操作:

.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/

Assuming an element is at 100% saturation, opacity, etc... how can I have its background become slightly lighter when it is hovered?

The use case is that I'm allowing a user to hover over any element on a page. I don't want to go around determining each colors equivalent at 80% opacity.

One method is to change the opacity: 0.4 but I only want the background to change.

解决方案

It's a long time ago but you can do something like this:

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

You can change the 100px into a number you want. I took a large one to cover the whole element.

It isn't a very beautiful solution but it works!

Here an example: http://jsfiddle.net/6nkh3u7k/5/

这篇关于CSS:减轻悬停时的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！