Question

我面临一些样式问题。悬停时如何将父标签样式应用于子标签（作为子标签）？举一个简单的例子，只关注问题。

def is_correct_connection_string():
    m = re.search("HostName=.*;DeviceId=.*;", CONNECTION_STRING)
    if m:
        return True
    else:
        return False

.outer:hover {
  background: yellow;
  z-index: 1;
  position: relative;
}

.inner {
  background: red;
  position: relative;
}

预期输出；通常，背景是红色的（来自内部类），但是在悬停时，我需要使用父标记的样式（外部类，背景：黄色）覆盖它。

外部和内部类必须仅在这些标记中。 http://jsfiddle.net/P7c9q/2209/

Answer 1

使用CSS变量：

.outer:hover {
  background: yellow;
  --c:transparent;
}

.inner {
  background: var(--c,red);
}

<div class="outer">
  <div class="inner">Something</div>
</div>

或使用继承：

.outer:hover {
  background: yellow;
}
.outer:hover .inner {
  background:inherit;
}

.inner {
  background: red;
}

<div class="outer">
  <div class="inner">Something</div>
</div>

Answer 2

当：hover .inner:not(:hover)时，使用：not选择器覆盖父样式。如果没有将鼠标悬停在它上面，它将使用它自己的子样式；当将鼠标悬停在它上面时，它将使用它的父样式。

父标签样式可以优先于悬停子标签上的类似样式吗

2 个答案: