Question

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

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

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

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

我如何实现这一目标？

Here is a Plunker

Answer 1

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

但是还有另一种方法可以在这里得到解答，我将在下面复制： https://stackoverflow.com/a/16910152/1026017

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

选项1：::在psuedo-element之前：

.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;
}

CSS - 悬停时颜色未知

1 个答案: