Question

我想这样做，以便将鼠标悬停在某个元素上时，它总是比最初的颜色更暗或更亮。不管颜色

类似但通用的

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

Answer 1

您正在寻找brightness CSS filter：

Brightness（）CSS函数将线性乘数应用于输入图像，使其看起来更亮或更暗

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

curl -v -X PUT --upload-file "test.txt" http://remote_api_service/api/files

Answer 2

有一种方法可以通过添加一个伪元素作为叠加层

查看代码段

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

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

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

Answer 4

嗯，我可以想象两个选择

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

<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：变暗/变亮https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode，但它对Edge或Android的网络视图。

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

Answer 6

您可以使用filter

div:hover{ 
filter: contrast(0.5)
}

示例：

.red{
  Background:red;
   width:200px;
   height:200px
}

.green{
  Background:green;
   width:200px;
   height:200px
}

div:hover {
  filter: contrast(0.5)
}

<div class="red"></div>
<div class="green"></div>

浏览器support

Answer 7

您可以使用不透明度使其像：-

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

<div></div>

如何使任何悬停的颜色比原始颜色更深/更浅

7 个答案: