CSS：在悬停时减轻元素

Posted 2023-03-06

技术标签:

【中文标题】CSS：在悬停时减轻元素【英文标题】：CSS: lighten an element on hover 【发布时间】：2013-04-17 04:49:16 【问题描述】：

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

用例是我允许用户将鼠标悬停在页面上的任何元素上。我不想到处确定每种颜色在 80% 的不透明度下等效。

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

【问题讨论】：

调暗其他所有元素，因为元素已经尽可能亮了。除非您使用某种图像，否则请使用 RGBA 而不是不透明度。是您要更改的颜色还是背景图像？如果颜色可以使用 HSL() 值并增加亮度值（最后一个）。 @Marc 不，谢谢，考虑到这种情况，这看起来很糟糕:) @Michael，谢谢，但这些已经设置为“a”=1。所以在这里并没有真正帮助我。 【参考方案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/

【讨论】：

这绝对是甜蜜的！最好的事情是它适用于具有任何背景或渐变等的元素。这应该是 IMO 公认的答案。请注意，inset 值应该是最后而不是第一个。如果您将三个 255 更改为 0，这也会使元素变暗，这会将白色变为黑色。我喜欢这个。比filter: brightness更好，因为它不会导致文字模糊【参考方案2】：

这是一个简单的方法：

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

【讨论】：

如果您不需要支持 IE11，这实际上是一个很好的快速简便的解决方案。过滤器肯定是未来，而不是必须使用伪元素黑客。但是应该编辑答案以删除 -webkit 前缀。过滤器的问题是，它使文本模糊这有助于我使用透明的 PNG vuetify.js v-img，因为 box-shadow 解决方案正在使整个方形图像变亮，而不仅仅是图像，也许我没有针对 .v-image__image正确或其他，但如果这只是工作，为什么还要打扰，谢谢！【参考方案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>

【讨论】：

不错的解决方案！【参考方案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 值是这样构建的/p>

【讨论】：

这是一个比我更好的解决方案，但是 IE8 不支持 rgba()：caniuse.com/#search=rgba @Ghodmode 这个问题被标记为CSS3 @roXon 伪元素和rgba() 都包含在 CSS3 规范中。使用 CSS3 并不一定排除对 IE8 的支持。我只是指出了使用rgba() 的一个可能的缺点。我只是认为我们现在使用的是 IE v10，这是一个（糟糕的）浏览器，它会与操作系统一起自动更新自身。使用 v8 或更低版本的人只是不知道如何使用计算机。无论如何，我正在使用 IE8（及更低版本）解决方案更新我的答案。【参考方案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+ */

之前的sn-p是从http://css3please.com复制粘贴的

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

【讨论】：

【参考方案6】：

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

【讨论】：

请注意，这也会改变悬停元素的子元素的亮度。【参考方案7】：

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