Question

我创建了一个元素，当您将鼠标悬停在该元素的区域内时，将应用悬停效果（更改背景颜色），该元素上方是一个按钮。当我将鼠标悬停在按钮上时，导致其他悬停效果消失了，我希望能够将鼠标一直停留在第一个元素的区域内。

因此，当我将鼠标悬停在示例中的按钮上时，我仍然希望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放在前面，并使用+选择下一个dom

#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>

将鼠标悬停在按钮上，同时仍在元素后面悬停效果

2 个答案: