Question

假设以下代码段。

.parent {
  width: 300px;
  height: 300px;
  background-color: grey;
  display: flex;
}

.child {
  width: 50%;
  height: 50%;
  background: white;
  margin: auto;
  border: 5px dotted grey;
}

.parent:hover {
  background-color: darkcyan;
}

.parent:hover>.child {
  border-color: darkcyan;
}

<div class="parent">
  <div class="child"></div>
</div>

请注意，child-div的边框与parent-div具有相同的颜色。当悬停父div时，它的背景颜色会发生变化，而child-div的border-color（实际上我正在使用-webkit-text-stroke）会变为相同的颜色。

我实际上希望孩子始终使用其父背景颜色，而不是手动设置孩子的边框颜色。当两个元素通过简单地继承它时使用相同的属性时，这种行为很容易实现。有没有办法使用不同的属性来实现这种行为？

由于

Answer 1

您可以使用border-color: transparent

.parent:hover > .child {
  border-color: transparent;
}

这样您就可以更改父级background，而不必每次都覆盖孩子的border-color。

不要忘记将孩子的background-clip设置为padding-box 因此背景仅涵盖不包括border的内容区域。

* {box-sizing: border-box;}
.parent {
  width: 300px;
  height: 300px;
  background-color: grey;
  display: flex;
}

.child {
  width: 50%;
  height: 50%;
  background: white;
  background-clip: padding-box;
  margin: auto;
  border: 5px solid grey;
}

.parent:hover {
  background-color: darkcyan;
}

.parent:hover>.child {
  border-color: transparent;
}

<div class="parent">
  <div class="child"></div>
</div>

Answer 2

您可以使用CSS自定义属性（也称为变量），它们是子级继承的，可以用于任何属性。

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

在父级中定义它们，然后可以在父级和子级中重用它们：

.parent {
  --parent-mainfill: grey;
  --parent-hoverfill: darkcyan;
 
  width: 300px;
  height: 300px;
  background-color: var(--parent-mainfill);
  display: flex;
}

.child {
  width: 50%;
  height: 50%;
  background: white;
  margin: auto;
  border: 5px dotted var(--parent-mainfill);
}

.parent:hover {
  background-color: var(--parent-hoverfill);
}

.parent:hover>.child {
  border-color: var(--parent-hoverfill);
}

<div class="parent">
  <div class="child"></div>
</div>

CSS：将border-color设置为父级的背景色

2 个答案: