假设一个元素处于 100% 的饱和度、不透明度等状态......当它悬停时，我怎样才能让它的背景变得稍微亮一些？
用例是我允许用户将鼠标悬停在页面上的任何元素上。我不想四处确定每种颜色的不透明度为 80%。
一种方法是更改，opacity: 0.4但我只想更改背景。
问问题
101948 次
7 回答
83
这是很久以前的事了，但你可以这样做：
.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/
于 2014-09-27T11:02:35.920 回答
73
这是一个简单的方法：
.myElement:hover {
filter: brightness(150%);
}
于 2016-11-30T18:50:19.913 回答
16
我使用box-shadow属性来控制背景颜色的亮度，通过放置一个半透明的覆盖
例子：
.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>于 2019-08-27T15:28:23.573 回答
10
您应该使用 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*/
}
如果你强烈需要让它在 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;
}
请注意，startColorstr和endColorstr值是这样构建的#AARRGGBB（其中 AA 是 Alpha 通道），如果您不希望从一种颜色到另一种颜色的渐变效果，则必须相同。
于 2013-04-23T20:22:09.353 回答
5
我会使用:after伪元素而不是传统的背景。它在 IE8 中受支持，而在哪里rgba()不支持。
HTML：
<div class="hoverme">
<p>Lorem ipsem gimme a dollar!</p>
</div>
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;
}
或类似的东西。
http://caniuse.com/#search=%3Aafter
要获得更平滑的结果，请添加 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+ */
}
上一个片段是从http://css3please.com复制和粘贴的
于 2013-04-23T20:28:47.007 回答
4
您可以仅使用 CSS 来执行此操作，filter: brightness();但目前仅在 WebKit 浏览器中受支持。见http://jsfiddle.net/jSyK7/
于 2013-04-23T21:05:36.423 回答
2
您想background-color在不使用不透明度的情况下更改悬停的任何元素的亮度。很遗憾。如果不background-color为悬停设置特定值，我认为这是不可能的。
用例是我允许用户将鼠标悬停在页面上的任何元素上。我不想四处确定每种颜色的不透明度为 80%。
我可以想到一种替代方法，但它需要在整个元素上覆盖一个半透明的 PNG 覆盖，这也将覆盖元素的任何内容。从而无法解决您的问题。
于 2013-04-23T20:34:31.173 回答