CSS：在悬停时使元素变亮

CSS: lighten an element on hover

提问by Don P

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

假设一个元素处于 100% 的饱和度、不透明度等......当它悬停时，我如何让它的背景变得更亮？

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.

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

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

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

回答by del4y

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.

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

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

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

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

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

回答by satnam

Here's an easy way to do it:

这是一个简单的方法：

.myElement:hover {
  filter: brightness(150%);
}

回答by Yenn

you should use the RGBa method (background-color:rgba(R,G,B,alpha);) to do this:

您应该使用 RGBa 方法 ( background-color:rgba(R,G,B,alpha);) 来执行此操作：

.element{
    background-color:rgba(0,0,0,1); /*where 1 stands for 100% opacity*/
} 
.element:hover{
    background-color:rgba(0,0,0,0.5); /*where 0.5 stands for 50% opacity*/
}

FIDDLE

小提琴

AND if you strongly need to make it work in IE8 or lower too here is how it comes:

如果你强烈需要让它在 IE8 或更低版本中工作，这里是它是怎么来的：

.element:hover{
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)"; /* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);   /* IE6 & 7 */
      zoom: 1;
}

note that the startColorstrand endColorstrvalues are built like this #AARRGGBB(where AA is the Alpha channel) and must be the same if you don't want a gradient effect from a color to another.

请注意，startColorstr和endColorstr值是这样构建的#AARRGGBB（其中 AA 是 Alpha 通道）并且如果您不希望从一种颜色到另一种颜色的渐变效果必须相同。

回答by David Storey

You can do this with only CSS using filter: brightness();but it is only currently supported in WebKit browsers. See http://jsfiddle.net/jSyK7/

您可以仅使用 CSS 执行此操作，filter: brightness();但目前仅在 WebKit 浏览器中受支持。见http://jsfiddle.net/jSyK7/

回答by Arik

I'm using box-shadowproperty to control the brightness of the background color, by placing a translucent overlay

我使用box-shadow属性来控制背景颜色的亮度，通过放置半透明覆盖

Example:

例子：

.btn {

  background-color: #0077dd;
  
  display: inline-flex;
  align-content: center;
  padding: 1em 2em;
  border-radius: 5px;
  color: white;
  font-size: 18px;
  margin: 0.5em;
  cursor: pointer;
}

.btn.brighten:hover {
  box-shadow: inset 0 0 0 10em rgba(255, 255, 255, 0.3);
}

.btn.darken:hover {
  box-shadow: inset 0em 0em 0em 10em rgba(0, 0, 0, 0.3);
}

<span class="btn brighten">Brighten on Hover</span>
<span class="btn darken">Darken on Hover</span>

回答by Arik

I would use a :afterpseudo-element instead of a conventional background. It's supported in IE8, where rgba()isn't.

我会使用:after伪元素而不是传统的背景。它在 IE8 中受支持，但在何处rgba()不支持。

HTML:

HTML：

<div class="hoverme">
    <p>Lorem ipsem gimme a dollar!</p>
</div>

CSS:

CSS：

.hoverme {
    position: relative;
}
.hoverme:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #fff;
    z-index: -1;
}

.hoverme:hover:after {
    background-color: #ddd;
}

or something like that.

或类似的东西。

http://caniuse.com/#search=%3Aafter

http://caniuse.com/#search=%3Aafter

For a smoother result, add a CSS3 transition:

为了获得更平滑的结果，请添加 CSS3 过渡：

.hoverme:after {
  -webkit-transition: all 0.3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
     -moz-transition: all 0.3s ease-out;  /* Firefox 4-15 */
       -o-transition: all 0.3s ease-out;  /* Opera 10.50–12.00 */
          transition: all 0.3s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}

The previous snippet was copied and pasted from http://css3please.com

上一个片段是从http://css3please.com复制粘贴的

http://jsfiddle.net/ghodmode/6sE9E/

http://jsfiddle.net/ghodmode/6sE9E/

回答by Chris Bier

You want to change the background-colorlightness of any element that is hovered without using opacity. Unfortunately. I don't think this is possible without setting specific background-colorvalues for your hovers.

您想background-color在不使用不透明度的情况下更改悬停的任何元素的亮度。很遗憾。如果不background-color为您的悬停设置特定值，我认为这是不可能的。

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.

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

There is one alternative that I can think of but it would require a translucent PNG overlay on the entire element, which will also cover any of the element's contents. Thereby not solving your problem.

我可以想到一种替代方法，但它需要在整个元素上使用半透明的 PNG 覆盖，这也将覆盖元素的任何内容。从而没有解决你的问题。

Related Question: Dynamically change color to lighter or darker by percentage CSS (Javascript)

相关问题：按百分比 CSS (Javascript) 动态将颜色更改为更亮或更暗