Javascript 如何使任何悬停颜色比原始颜色更暗/更亮_Javascript_Jquery_Html_Css

Javascript 如何使任何悬停颜色比原始颜色更暗/更亮

javascript jquery html css

Javascript 如何使任何悬停颜色比原始颜色更暗/更亮,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我希望这样，当你把鼠标悬停在一个元素上时，它总是比最初更暗或更亮。不管颜色如何类似这样但普遍存在的东西。颜色更深{ 背景：红色；宽度：100px；高度：100px } .深色：悬停{ 背景：#b20000 } .打火机{ 背景：蓝色；宽度：100px；高度：100px } .打火机：悬停{ 背景：#adccff } 您可以使用不透明度将其设置为：- div{ 背景：rgba（255,0,0,0.8）；宽度：200px；高度：200px } div:悬停{ 背景：rgba（25

我希望这样，当你把鼠标悬停在一个元素上时，它总是比最初更暗或更亮。不管颜色如何

类似这样但普遍存在的东西

。颜色更深{
背景：红色；
宽度：100px；
高度：100px
}
.深色：悬停{
背景：#b20000
}
.打火机{
背景：蓝色；
宽度：100px；
高度：100px
}
.打火机：悬停{
背景：#adccff
}

您可以使用不透明度将其设置为：-

div{
背景：rgba（255,0,0,0.8）；
宽度：200px；
高度：200px
}
div:悬停{
背景：rgba（255,0,0,1）
}

有一种方法可以通过添加一个伪元素作为覆盖来实现

请参阅代码片段

div{
位置：相对位置；
显示：内联块；
颜色：白色；
字号：18px；
填充：50px；
}
div>*{
位置：相对位置；
z指数：2；
}
红色分区{
背景：红色；
}
格林分区{
背景：绿色；
}
蓝色分区{
背景：蓝色；
}
部门：之后{
内容：''；
显示：内联块；
背景：黑色；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
不透明度：0；
z指数：1；
}
div:hover:：after{
不透明度：.3；
}

文本
按钮

您正在查找：

函数的作用是：将线性乘法器应用于输入图像，使其看起来更亮或更暗

div{
宽度：50px；
高度：50px；
背景：红色；
滤光片：亮度（1）；
}
.悬停指示灯：悬停{
滤光片：亮度（5.00）；
}
.悬停时变暗：悬停{
滤光片：亮度（0.5）；
}

悬停时颜色更暗
悬停打火机
 > p>您可以考虑多个背景和一些CSS变量，如下所示。其想法是通过调整背景大小


.color{
背景：
线性梯度（rgba（0,0,0,0.5），rgba（0,0,0,0.5）），
线性梯度（rgba（255，255，255，0.5），rgba（255，255，255，0.5）），
线性梯度（var（--c，红色），var（--c，红色）；
背景尺寸：0，0，0，自动；
宽度：100px；
高度：100px；
显示：内联块；
}
.深色：悬停{
背景尺寸：自动，0，自动；
}
.打火机：悬停{
背景大小：0，自动，自动；
}
蓝先生{
--c:蓝色；
}
格林先生{
--c:绿色；
}
黄先生{
--c:黄色；
}
.粉红{
--c:粉红色；
}
嗯，我可以想象有两种选择
1） 在按钮内部使用一个元素，并为该元素设置一个具有如下不透明性的背景（虽然有点粗糙）
这样，带有不透明度的跨度背景可以使按钮的背景变暗或变亮
2） 使用图像作为按钮背景，悬停时，添加带有alpha值的颜色，并使用背景混合模式：变暗/变亮，但它对Edge或Android的网络视图没有很好的支持。
我认为你没有清楚地解释你想做什么。我下面的解决方案回答了您在这句话中提出的问题：
“我想为button元素指定一些背景…我想使它在添加类名时变暗或变亮，并将鼠标悬停在按钮上，使其颜色变暗/变亮。”

钮扣{
背景色：红色；
填充：20px；
利润率：20px；
}
按钮：悬停。变暗{
背景色：深灰色；
}
按钮：悬停。打火机{
背景颜色：灰色；
}
这个按钮会变暗
这个按钮会变轻
css过滤器，如过滤器：亮度（50%）也许？也许有办法让jquery工作？任何人都知道你在做什么。但是，请使用不透明度或过滤器来更改亮度。已经试过了！不透明度不会使东西变暗，而过滤器会使文本变得太亮“太亮”？只需把它调大一点…不透明度
可能会使它看起来更暗，但它也会有变透明的副作用。酷！但我怎样才能让它反过来工作呢？当我在按钮上使用它时，你可以将伪元素的背景从黑色变为白色，它一开始会变亮，但随后会立即恢复正常。。而且文本变得太亮了，这是因为按钮文本的颜色与背景颜色大不相同；因此，它变得比它应该的要亮得多。玩你的颜色和使用较低的+亮度值。但我刚才复制了上面的代码并将其分配给按钮元素让我再解释一遍。过滤器应用于元素上的所有颜色。如果文本颜色比背景颜色亮得多，则文本将显示为“烧焦”，以达到使背景看起来稍微明亮所需的亮度级别。您可能还可以使用filter:contrast
，但我不确定。你原来的帖子从来没有提到过一个按钮；等待其他答案。或者问另一个问题：“如何确保过滤器：亮度
不会使文本显示为烧焦”或其他问题。这是一个有趣的问题。A第一个问题很好！但是span元素并没有覆盖整个按钮。如何使其继承按钮元素的宽度和高度？因此，对于我为按钮设置的任何宽度/高度，它都是灵活的？至少在我的代码笔代码中，我看到跨度覆盖了FF和Chrome中的整个按钮，在我的代码笔或代码中，你看不到这一点？如果你更改按钮大小，那么如何更改按钮大小？展示你现在所拥有的是的。但不管初始颜色如何，它都应该比原来的颜色深/浅一些，而不是像这里那样完全灰色。然后，您可以设置不透明度：0.5，而不是背景色。
<button id='button1'><span>Darker</span></button>

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

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);
}

<!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>