首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >CSS -带有未知颜色的悬停时变暗

CSS -带有未知颜色的悬停时变暗
EN

Stack Overflow用户
提问于 2015-01-11 00:16:11
回答 1查看 46.2K关注 0票数 22

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

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

代码语言:javascript
复制
background-color: rgba(91, 91, 91, 0.51) !important;

但它看起来并不好,它使整个<li> (这是我所指的框)在悬停时是透明的。

我该如何实现这一点?

Here is a Plunker

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-01-11 00:20:31

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

但这里有另一种回答方式,我将复制到下面:https://stackoverflow.com/a/16910152/1026017

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

选项1:在psuedo-element之前:

代码语言:javascript
复制
.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覆盖:

代码语言:javascript
复制
.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:长方体阴影方法( gif方法的变体-可能存在性能问题):

代码语言:javascript
复制
.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;
}
票数 29
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/27878304

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档