在现代 CSS 中悬停时更改为相对颜色

Posted 2023-02-21

【中文标题】在现代 CSS 中悬停时更改为相对颜色

【英文标题】：Change to a relative color on hover in modern CSS

【发布时间】：2020-04-23 15:00:13

【问题描述】：

我想对悬停在链接上做出反应：

/* mouse over link */
a:hover 
    text-decoration: none ;
    border-bottom: 1px dotted ;

...稍微改变文本周围的背景颜色。我不想指定某种颜色，而只想使继承的颜色变亮或变暗，就像当前设置的那样。对于链接上的hover 和active，我希望改变背景颜色，以提供按下按钮的效果。

我希望能够更改文本或页面的背景颜色，而不必更改 a:hover 规则中的特定颜色。

【问题讨论】：

SCSS 可以使颜色变亮或变暗，因此您可以说“lighten($color, .2)”将颜色变亮 20%。您可以将背景颜色设置为不同的变亮，或变暗，原始颜色的百分比以保持悬停和背景之间的比例一致。更多关于 SCSS 的信息：sass-lang.com。或者你可以使用 CSS 变量：

@NathanielFlick 感谢您的提示。如果可能的话，我希望直接用 CSS 来做到这一点。

CSS 没有颜色函数，但它有颜色变量。 SASS 编译成 CSS 所以基本上是一样的。 :)

您可能希望看到filter: brightness()，尽管这会改变文本的颜色而不是背景颜色。

@k-a-v 对于链接上的hover 和active，我希望改变背景颜色，以提供按下按钮的效果。

【参考方案1】：

您可以使用filter: brightness()，但您还必须在正文背景上指定特定颜色，并将a 的背景指定为inherit。 background-color的默认值为transparent，不能变暗。需要将其更改为inherit 才能获得特定的颜色，这样才能使变暗起作用。如果是透明的，则 alpha 为 0，不会变暗或变亮。

但是，如果链接在 div 内，并且 div 没有特定的背景颜色，那么它将是透明的，并且链接将继承该背景颜色。所以链接需要有特定的背景颜色才能变暗。

我做了一个window.getComputedStyle($0)["background-color"]，其中$0是在开发者控制台中选择的div，结果是"rgba(0, 0, 0, 0)"，意思是透明的。

body  background: white 

a  background: inherit; border-radius: 2px 

a:hover 
    text-decoration: none;
    border-bottom: 1px dotted #ccc;
    filter: brightness(.8);

<a href="http://www.google.com">Google</a>

【参考方案2】：

对于这种情况，我通常使用HSL 颜色值。无需在所有内容之间复制颜色，只需更改其中的 lightness 部分即可。

HSL 颜色值指定为：hsl(hue, saturation, lightness)。

a 
  width: auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0.5rem 0;
  padding: 1rem 2rem;
  color: white;


.color 
  --hue: 281;
  --saturation: 100%;
  --lightness: 60%;
  background-color: hsl(var(--hue), var(--saturation), var(--lightness));


.color.light:hover 
  --lightness: 80%;
  /* 20% light */


.color.dark:hover 
  --lightness: 40%;
  /* 20% dark */

<a class='color light'>lighten</a>
<a class='color dark'>darken</a>

【参考方案3】：

...稍微改变文本周围的背景颜色。

如果您希望颜色完全围绕文本，则可以使用text-shadow：

a 
  font: bold 2em serif;
  text-decoration: none;
  margin-right: 5px;
  color: inherit;


a:hover 
  text-shadow: 1px 0px 2px #000, 1px 0 9px #000;
  /* text-shadow: 1px 0px 2px #000, -1px 0 2px #000; */


a:active 
  text-shadow: 0px 0px 6px #000, 1px 1px 2px #000;
  color: #fff8;
  filter: contrast(20) opacity(0.5);

<div style="background-color: white; color:blue ">
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
</div>
<div style="background-color: wheat; color:#D06224 ">
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
</div>
<div style="background-color: lightgreen; color:#172774">
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
</div>
<div style="background-color: lightseagreen; color: lightsalmon">
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
</div>

阴影会根据blur-radius 自动模糊并与背景混合。您不必提供额外的不透明度。 在悬停时，我使文本周围的区域变暗，在单击（活动）时，我使文本透明，以便它采用背景颜色。

【参考方案4】：

到目前为止，仅使用 css 是不可能的。你可以使用像 SASS 这样的预处理。

然后你可以使用filter 规则改变色调。

最后，可能是你想要的，有 color-mod() 规则在工作中，但我最近没听说过。

参考：https://www.w3.org/TR/css-color-4/

---

PS：我确实记得有时使用：

a 
  background: rgba(255, 0, 0, 1);


a:hover 
  background: rgba(255, 0, 0, .8);


div 
  display: inline-block;
  background: black;


div + div 
  background: white;

<div><a>Hover me, darken</a></div>
<div><a>Hover me, lighten</a></div>

【讨论】：

使用 SASS 进行预处理只输出 CSS，因此完全可以单独使用 CSS。

@Rob，在页面中添加 JS 也会导致 CSS 出现...关键是你将不得不做一些额外的开销才能让它工作，这与运行的 color-mod() 函数不同开箱即用。

【参考方案5】：

您可以考虑在背景上方添加一个额外的图层，在其中应用白色或黑色着色以使背景更亮或更暗：

a 
  display:inline-block;
  padding:10px;
  color:#fff;
  position:relative;
  z-index:0;

.red 
  background:red;

.blue 
  background:blue;

.green 
  background:green;

.light:before,
.dark:before 
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(255,255,255,0.3);
  opacity:0;

.dark:before 
  background:rgba(0,0,0,0.3);


a:hover::before 
  opacity:1;

<a class="red light" href="">some text here</a>
<a class="red dark" href="">some text here</a>
<a class="blue light" href="">some text here</a>
<a class="blue dark" href="">some text here</a>
<a class="green light" href="">some text here</a>
<a class="green dark" href="">some text here</a>

没有伪元素的类似想法

a 
  display:inline-block;
  padding:10px;
  color:#fff;

.red 
  background:red;

.blue 
  background-color:blue;

.green 
  background:green;


.light 
  background-image:linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3));

.dark 
  background-image:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3));


.light,
.dark 
  background-size:0 0;


a:hover 
  background-size:100% 100%;

<a class="red light" href="">some text here</a>
<a class="red dark" href="">some text here</a>
<a class="blue light" href="">some text here</a>
<a class="blue dark" href="">some text here</a>
<a class="green light" href="">some text here</a>
<a class="green dark" href="">some text here</a>