将鼠标悬停在按钮上，同时仍然保持其后面元素的悬停效果

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里面！这就是它的工作原理！

Answer 2

将#label放在前面，然后使用+选择下一个滑动随机

​

#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;
}
#button1:hover + #label {
  background-color: black;
}

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

​