CSS - 悬停时变暗，颜色未知[重复]

Posted 2023-02-21

【中文标题】CSS - 悬停时变暗，颜色未知[重复]

【英文标题】：CSS - Darken on hover with unknown color [duplicate]

【发布时间】：2015-03-08 19:42:38

【问题描述】：

我在50x50px 的框中随机生成颜色，当我将它们悬停时，我希望它们变得更暗，但保持相同的颜色。

我尝试将li:hover 设置为具有透明度的深色

background-color: rgba(91, 91, 91, 0.51) !important;

但它看起来不太好，它使整个<li>（我指的框）在悬停时透明。

我如何做到这一点？

Here is a Plunker.

【问题讨论】：

***.com/a/25942447/406804

【参考方案1】：

抱歉，不能只更改 alpha。您必须为每个单独的类指定红色、绿色和蓝色值。

但是这里有另一种回答方式，我将在下面复制： https://***.com/a/16910152/1026017

这是一个演示： http://codepen.io/chrisboon27/pen/ACdka

选项 1：::before 伪元素：

.before_method
  position:relative;

.before_method:before
  display:block;
  content:" ";
  position:absolute;
  z-index:-1;
  background:rgb(18, 176, 41);
  top:0;
  left:0;
  right:0;
  bottom:0;
  opacity:0.5;

.before_method:hover:before
  opacity:1;

选项 2：白色 gif 叠加：

.image_method
  background-color: rgb(118, 76, 41);
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/f/fc/Translucent_50_percent_white.png)

.image_method:hover
  background-image:none;

选项 3：Box-shadow 方法（gif 方法的变体 - 可能存在性能问题）：

.shadow_method
  background-color: rgb(18, 176, 41);
  box-shadow:inset 0 0 0 99999px rgba(255,255,255,0.2);

.shadow_method:hover
  box-shadow:none;

【讨论】：

该死，你赢了我几秒钟！ :P

方法三成功了，谢谢朋友

很好的答案，谢谢。我发现反转此方法有用且更简单：不要在没有悬停的情况下使用任何额外的东西，并且在悬停时使用：box-shadow: inset 0 0 0 99999px rgba(128,128,128,0.2)。这对我来说是必要的，因为我的行交替白色和浅灰色，所以原来的答案没有改变白色。

现在可以只更改alpha。参见例如***.com/a/45463603