CODEWITHSUNDEEP
css
JackU
JackU

Reputation: 1476

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

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?

Upvotes: 0

Views: 515

Answers (2)

SIMDD
SIMDD

Reputation: 645

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>

Upvotes: 0

adel
adel

Reputation: 3507

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

Upvotes: 1

Related Questions