Question

假设一个元素处于100％饱和度，不透明度等等......我怎样才能让它的背景在悬停时变得稍微亮一些？

用例是我允许用户将鼠标悬停在页面上的任何元素上。我不想四处测定相当于80％不透明度的每种颜色。

一种方法是更改opacity: 0.4，但我只想更改背景。

Answer 1

很久以前，你可以这样做：

.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/

Answer 2

这是一种简单的方法：

.myElement:hover {
  filter: brightness(150%);
}

Answer 3

你应该使用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*/
}

FIDDLE

如果您非常需要在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通道）相同，如果您不想要渐变效果，则必须相同一种颜色到另一种。

Answer 4

您可以使用filter: brightness();仅使用CSS执行此操作，但目前仅在WebKit浏览器中支持。见http://jsfiddle.net/jSyK7/

Answer 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

复制并粘贴了上一个代码段

http://jsfiddle.net/ghodmode/6sE9E/

Answer 6

您希望在不使用不透明度的情况下更改悬停的任何元素的background-color亮度。的不幸的是。如果不为您的悬停设置特定的background-color值，我认为这是不可能的。

用例是我允许用户将鼠标悬停在任何元素上页面。我不想四处寻找每种颜色的等价物不透明度为80％。

我可以想到一种替代方案，但它需要在整个元素上使用半透明的PNG覆盖，这也将覆盖任何元素的内容。从而无法解决您的问题。

相关问题：Dynamically change color to lighter or darker by percentage CSS (Javascript)

Answer 7

我正在使用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>

CSS：在悬停时减轻元素

7 个答案: