Html CSS - 悬停时颜色变暗，颜色未知
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27878304/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - Darken on hover with unknown color
提问by simeg
I'm randomly generating colors into boxes of 50x50pxand when I hover them I want them to become darker, but remain the same color.
我随机将颜色生成到盒子中50x50px，当我悬停它们时，我希望它们变暗，但保持相同的颜色。
I've tried setting li:hoverto a dark color with transparency
我试过设置li:hover为具有透明度的深色
background-color: rgba(91, 91, 91, 0.51) !important;
but it doesn't look good, it's making the whole <li>(which is the box I'm referring to) transparent on hover.
但它看起来不太好，它使整个<li>（这是我指的框）在悬停时透明。
How do I achieve this?
我如何实现这一目标？
回答by Scott
Sorry, it's not possible to only change the alpha. You have to specify the red, green and blue values for each individual class.
抱歉，不能只更改 alpha。您必须为每个单独的类指定红色、绿色和蓝色值。
But there's another way which is answered here and I'll copy below: https://stackoverflow.com/a/16910152/1026017
但是这里有另一种回答方式，我将在下面复制：https: //stackoverflow.com/a/16910152/1026017
Here's a demo: http://codepen.io/chrisboon27/pen/ACdka
这是一个演示：http: //codepen.io/chrisboon27/pen/ACdka
Option 1: ::before psuedo-element:
选项 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;
}
Option 2: white gif overlay:
选项 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;
}
Option 3: Box-shadow method (variation on the gif method - may have performance issue):
选项 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;
}
