如何使任何悬停的颜色比原始颜色更暗/更亮答案

【问题标题】：how to make ANY hovered color darker/lighter that the original如何使任何悬停的颜色比原始颜色更暗/更亮
【发布时间】：2019-05-09 23:45:51
【问题描述】：

我想这样当你将鼠标悬停在一个元素上时，它总是比最初更暗或更亮。无论颜色如何

类似但通用的东西

.darker{
Background:red;
width:100px;
height:100px
}

.darker:hover{
Background:#b20000
}
.lighter {
Background:blue;
width:100px;
height:100px
}

.lighter:hover{
Background:#adccff
}

<div class='darker'></div>
<div class='lighter'></div>

【问题讨论】：

像filter: brightness(50%); 这样的css过滤器可能吗？ caniuse.com/#feat=css-filters
也许有办法让它与 jquery 一起工作？有人吗？？
你正在做的奇怪的事情。但是，使用不透明度或过滤器来改变亮度。 developer.mozilla.org/en-US/docs/Web/CSS/filter-function/…
已经试过了！不透明度不会使事情变暗，过滤器会使文本变得太亮
“太亮”？那就把它调高一点...

标签： javascript jquery html css

【解决方案1】：

您正在寻找brightness CSS filter：

brightness() CSS 函数对输入图像应用线性乘数，使其看起来更亮或更暗

div {
  width: 50px;
  height: 50px;
  background: red;
  filter: brightness(1);
}

.light-on-hover:hover {
  filter: brightness(5.00);
}

.dark-on-hover:hover {
  filter: brightness(0.5);
}

<h5> Darker on hover </h5>
<div class="dark-on-hover"></div>

<h5> Lighter on hover </h5>
<div class="light-on-hover"></div>

【讨论】：

当我在按钮上使用它时，一开始会变亮，但很快就会恢复正常......而且文字也变得太亮
那是因为您的按钮文本与背景颜色截然不同；因此它变得比它应该的要亮得多。使用您的颜色并使用较低的 +brightness 值。
但我只是将上面的代码复制并分配给一个按钮元素
让我再解释一下。过滤器应用于元素上的所有颜色。如果文本颜色比背景颜色浅得多，则文本将显示为“烧焦”，达到使背景看起来略亮所需的亮度级别。您也可以使用filter: contrast 侥幸逃脱，但我不确定。您的原始帖子从未提及按钮。
不适用于您的用例；等待其他答案。或者问另一个问题：“如何确保filter: brightness 不会使文本看起来被烧毁”之类的。这是一个有趣的问题。

【解决方案2】：

有一种方法可以通过添加伪元素作为叠加层来做到这一点

见代码sn-p

div {
  position: relative;
  display: inline-block;
  color: white;
  font-size: 18px;
  padding: 50px;
}

div > * {
  position: relative;
  z-index: 2;
}

div.red {
  background: red;
}

div.green {
  background: green;
}

div.blue {
  background: blue;
}

div:after {
  content: '';
  display: inline-block;
  background: black;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  z-index: 1;
}

div:hover::after {
  opacity: .3;
}

<div class="red"><span>text</span></div>
<div class="green"><a href="#">link</a></div>
<div class="blue"><button>button</button></div>

【讨论】：

酷！但我怎样才能让它反过来工作呢？悬停时点亮
可以将伪元素的背景从黑色改为白色

【解决方案3】：

您可以考虑多个背景和一些 CSS 变量，如下所示。这个想法是通过调整background-size在顶部添加一些白色或黑色

.color {
  background: 
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
    linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), 
    linear-gradient(var(--c, red), var(--c, red));
  background-size: 0 0, 0 0, auto;
  width: 100px;
  height: 100px;
  display:inline-block;
}

.darker:hover {
  background-size:auto,0 0,auto;
}

.lighter:hover {
  background-size:0 0,auto,auto;
}

.blue {
 --c:blue;
}
.green {
 --c:green;
}

.yellow {
 --c:yellow;
}


.pink{
 --c:pink;
}

<div class='color darker blue'></div>
<div class='color lighter blue'></div>
<div class='color lighter red'></div>
<div class='color darker red'></div>
<div class='color darker green'></div>
<div class='color lighter yellow'></div>
<div class='color darker pink'></div>

【讨论】：

【解决方案4】：

嗯，我可以想象两种选择

1) 在按钮内使用一个元素，并为该元素设置一个不透明的背景，例如 https://codepen.io/anon/pen/WLNbPG（虽然有点 hacky）

<button id='button1'><span>Darker</span></button>

<button id='button2'><span>Lighter</span></button>

和 CSS

button {
  border: 0;
  background-color: red;
  padding: 0;
}
button span {
  display: block;
  padding: 1em
}

#button1:hover span {
  background-color: rgba(0,0,0,.4);
}

#button2:hover span {
  background-color: rgba(255,255,255,.4);
}

这样，带有不透明度的跨度背景可以使按钮的背景变暗或变亮。

2) 使用图像作为按钮背景，并在悬停时添加具有 alpha 值的颜色并使用 background-blend-mode: darken/lighten https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode 但它对 Edge 或 Android 的 webviews 没有很好的支持.

【讨论】：

第一个好！但 span 元素并没有覆盖整个按钮。我怎样才能让它继承按钮元素的宽度和高度？所以它对于我为按钮设置的任何宽度/高度都很灵活？
至少在我的 codepen 代码中，我看到 span 覆盖了 FF 和 Chrome 中的整个按钮，您在我的 codepen 或您的代码中看不到吗？
如果您更改按钮大小
但是您如何更改按钮大小？展示你现在得到的东西

【解决方案5】：

我认为你没有清楚地解释你想要做什么。我下面的解决方案回答了你在这句话中提出的问题：

“我想为按钮元素分配一些背景......并且我想这样做，以便当您添加类名 get-darker 或 get-lighter 并将鼠标悬停在按钮上时，它会将其颜色更改为较暗/打火机。”

<!DOCTYPE html>
<html lang="en-us">

<head>
    <style>
        button {
            background-color: red;
            padding: 20px;
            margin: 20px;
        }

        button:hover.get-darker {
            background-color: darkslategray;
        }

        button:hover.get-lighter {
            background-color: gray;
        }
    </style>

</head>

<body>
    <button class="get-darker">
        this button will get darker
    </button>
    <button class="get-lighter">
        this button will get lighter
    </button>
</body>

</html>

【讨论】：

是的。但它应该只是比原来更暗/更亮的几个阴影，不管初始颜色如何，而不是像这里那样完全灰色。
那么你可以设置opacity: 0.5而不是background-color。

【解决方案6】：

你可以使用不透明度来使它像：-

div{
Background:rgba(255, 0, 0, 0.8);
width:200px;
height:200px
}

div:hover{
Background:rgba(255, 0, 0, 1)
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

opacity 可能会使它看起来更暗，但它也有变得透明的副作用。