css - 将鼠标悬停在按钮上，同时仍然具有其后面元素的悬停效果

Question

我创建了一个元素，当您将鼠标悬停在该元素的区域内时，会应用悬停效果(更改背景颜色)，该元素的顶部是一个按钮。当我将鼠标悬停在按钮上时，它会导致其他悬停效果消失，我希望能够在鼠标位于第一个元素区域内的整个时间内保持悬停状态。

Example Code Here

因此，当我将鼠标悬停在示例中的按钮上时，我仍然希望 a 标记的背景为黑色。当我将鼠标悬停在按钮上时，它会导致黑色背景消失。我还希望能够点击按钮。

要达到我想要达到的效果，我需要使用js吗？或者可以用 CSS 完成吗？

Answer 1

#button1 {
  position: absolute;
  z-index: 100;
  top: 10%;
  left: 15%;
}
#label {
  position: absolute;
  z-index: -10;
  border: 1px solid red;
  width: 200px;
  height: 200px;
  text-align: center;
}
#label span {
  color: white;
}
#label:hover {
  background-color: black;
}

#label button:hover{
  color:white;

<a id="label"><span>Hidden Until Hover</span>
<button id="button1">Test Button</button>
</a>

您需要将按钮包裹在#label 内!这就是它的工作原理!