Hover over button while still having hover effect of element behind it - css

Question

I have created an element where when you hover within the area of the element a hover effect is applied (change background colour), on top of this element is a button.
When I hover over the button it causing the other hover effect to disappear, I want to be able to keep the hover for the whole time that the mouse is within the area of the first element.
Example Code Here
So when I hover over the button in the example, I still want the background of the a tag to be black. At the moment when I hover over the button it causes the black background to disappear. I also still want to be able to click on the button.
To achieve what I want to achieve would I need to use js? Or can it be done in 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>
you need to wrap your button inside the #label !
this is how its work !

Answer 2

Put #label in front, and use + select next slibing 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>