CSS：鼠标悬停时使元素变亮

Question

假设一个元素的饱和度、不透明度等达到了100%，当悬停在上面时，如何让它的背景稍微变浅？

使用情景是我允许用户悬停在页面上的任何元素上。我不想确定每个颜色相当于80%的不透明度。

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

- Don P

---

将其他的元素暗淡下来，因为该元素已经达到了最高亮度。 - Marc B

除非您使用某种类型的图像，否则请使用RGBA而不是不透明度。 - Michael

你想改变的是颜色还是背景图片？如果是颜色，你可以使用 HSL() 值并增加亮度值（最后一个）。 - David Storey

@dstorey - 我只想改变背景颜色。 - Don P

@DonP 你应该将del4y的答案标记为采纳的答案。看起来正好符合我们的要求。 - LaVache

Answer 1

这里有一个简单的方法来做到这一点：

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

- satnam

---

如果您不需要支持IE11，那么这实际上是一个好的快速简单的解决方案。过滤器肯定是未来，而不是使用伪元素hack。但是答案应该被编辑以删除-webkit前缀。 - Trevor

过滤器的问题在于会使文本变得模糊。 - Nodeocrat

这对我有所帮助，关于透明的PNG图像vuetify.js v-img，因为使用box-shadow解决方案会使整个正方形图像变亮，而不仅仅是图像本身，也许我没有正确地定位.v-image__image，但如果这种方式可行，为什么还要费心呢，谢谢！ - ajax333221

Answer 2

虽然时间已经很久远，但您仍然可以像这样做：

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

- del4y

---

这绝对很棒！最好的是它适用于任何种类的背景或渐变等元素。在我看来，这应该是被接受的答案。请注意，inset值应该在最后而不是在最前面。 - beercohol

如果你将三个 255 改为 0，那么这也可以用来使元素变暗，从而将白色变成黑色。 - styfle

我喜欢这个。它比“filter: brightness”更好，因为它不会导致文本模糊。 - Nodeocrat

Answer 3

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

- Arik

---

好的解决方案！ - Bernhard

Answer 4

你应该使用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通道），如果您不想要从一种颜色到另一种颜色的渐变效果，则这些值必须相同。

- Yenn

---

这是一个比我的解决方案更好的解决方案，但是rgba()在IE8中不受支持：http://caniuse.com/#search=rgba - user166560

@Ghodmode 这个问题被标记为CSS3。 - Roko C. Buljan

@roXon 伪元素和 rgba() 都包含在 CSS3 规范中。使用 CSS3 不一定排除对 IE8 的支持。我只是指出使用 rgba() 可能存在的缺点。 - user166560

我认为目前我们使用的是IE的v10版本，这是一个（糟糕的）浏览器，它会随着操作系统自动更新。那些使用v8或更低版本的人就是不懂如何使用电脑。无论如何，我会更新我的答案，提供IE8（及更低版本）的解决方案。 - Yenn

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/

- user166560

Answer 6

您可以仅使用CSS来完成此操作，使用filter: brightness();，但目前仅受WebKit浏览器支持。请参见http://jsfiddle.net/jSyK7/

- David Storey

---

请注意，这也会改变鼠标悬停元素的子元素的亮度。 - Chris Bier

Answer 7

你想在任何鼠标悬停的元素上更改背景颜色亮度，而不使用不透明度。很遗憾，如果没有为你的悬停设置特定的背景颜色值，我认为这是不可能的。

用例是，我允许用户悬停在页面上的任何元素上。我不想浪费时间去确定每个颜色的80%的不透明度等效值。

我能想到的一种替代方法是，在整个元素上放置一个半透明的PNG叠加层，它也会覆盖任何元素的内容。因此并不能解决你的问题。

相关问题：CSS（JavaScript）动态将颜色按百分比变亮或变暗

- Chris Bier