我创建了一个元素，当您将鼠标悬停在元素区域内时，会应用悬停效果（更改背景颜色），该元素的顶部是一个按钮。当我将鼠标悬停在按钮上时，它会导致其他悬停效果消失，我希望能够在鼠标位于第一个元素区域内的整个时间内保持悬停。
因此，当我将鼠标悬停在示例中的按钮上时，我仍然希望a标签的背景为黑色。当我将鼠标悬停在按钮上时，它会导致黑色背景消失。我也仍然希望能够点击按钮。
为了实现我想要实现的目标，我需要使用 js 吗？或者它可以在CSS中完成？
#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 内！这是它的工作原理！
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句