css - CSS：在已经悬停的元素上的第二个悬停动作（z-index？）

Question

我正在构建这个应用程序的克隆。.gif 是我想要复制的。

我有一个Email具有悬停动作来更改背景颜色的组件。在该组件中有一个 Next.js<Image/>组件，它也应该有另一个悬停动作。

你如何“堆叠”悬停动作？我尝试将 the 设置z-index为 1 并将 the 设置为Email10 并在 theImage上进行另一个悬停操作，Image但这不起作用。我需要 z-index 吗？我错过了什么？

score 1 · Accepted Answer

您可以像设置:hover父元素一样设置子元素的样式。z-index不相关。

div:hover {
  background-color: orange;
}

span:hover {
  background-color: blue;
}

<div>
  <span>hello</span> there
</div>

1 回答 1