代码之家 › 专栏 › 技术社区 › Basil Bourque

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

background-color colors css

Basil Bourque · 技术社区 · 6 年前

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

稍微改变文本周围的背景色。我不想指定某种颜色,我只想按当前设置。对于 hover 和 active 在一个链接上,我想改变背景色,给人一种按下按钮的效果。

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

2 回复 | 直到 6 年前

nonopolarity 6 年前

您可以使用 filter: brightness() ,尽管您还必须在主体背景和 a 成为 inherit . 的默认值 background-color 是 transparent 不能变暗。需要更改为为了得到一种特定的颜色,使变暗可以工作。如果是透明的,则alpha为0,不会变暗或变亮。

div 和 部门 没有特定的背景色,那么它将是透明的,链接将继承该背景色。因此,链接需要有一个特定的背景颜色变暗。

我做了一个 window.getComputedStyle($0)["background-color"] 其中 $0 部门 在开发者控制台中选择,结果是 "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>

Penny Liu 5 年前

我通常使用 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>

the Hutt 4 年前

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

如果你想要文字周围的颜色,那么 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

并与背景融合。您不必提供额外的不透明度。

Akxe 6 年前

到目前为止,仅使用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>

Temani Afif 6 年前

您可以考虑在背景上方添加一层,在其中应用白色或黑色着色,以使背景更亮或更暗:

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 dark”href=”>这里有一些文字</a>
<a class=“蓝光”href=”>这里有一些文字</a>
<a class=“blue dark”href=”>这里有一些文字</a>
<a class=“绿灯”href=“>这里有一些文字</a>
<a class=“green dark”href=”>这里有一些文字</a>