CODEWITHSUNDEEP
htmlcss
KrissJonsi
KrissJonsi

Reputation: 3

HTML/CSS hover one element, effect on two different divs?

I have been stuck on this for quite a while, and yes I've searched stackoverflow, but without luck.

I am trying to hover on the launchHidden div element and changing nextSide and leverPart2's properties.

nextSide's properties change, but leverPart2's properties do not.

#launchHidden:hover~#nextSide {
  z-index: 109;
  background-color: blue;
}

#launchHidden:hover~#leverPart2 {
  bottom: 50px;
  width: 200px;
}

#nextSide {
  transition: all 1s;
  position: absolute;
  width: 40px;
  height: 40px;
  left: 726px;
  bottom: 29px;
  z-index: 106;
  border-radius: 50%;
}

#leverPart2 {
  transition: all 1s;
  position: absolute;
  width: 60px;
  height: 20px;
  bottom: 210px;
  left: 715px;
  border-radius: 20px;
  background-color: grey;
  z-index: 108;
}
<div id="leverPart2"></div>
<div id="launchHidden"></div>
<div id="launchButton"></div>
<a id="nextSide" href="side3.html"></a>

Upvotes: 0

Views: 95

Answers (1)

Intervalia
Intervalia

Reputation: 10945

It seems that you much change the order in the DOM of the leverPart2 element and the launchHidden element like this:

HTML

<div id = "launchHidden"></div>
<div id = "leverPart2"></div>
<div id = "launchButton"></div>
<a id= "nextSide" href = "side3.html"></a>

The siblings must be after the primary element. Since your primary element was #launchHidden all of the siblings must exist after that one.

Also, I had to put something into the launchHidden div so there was something to hover over. I assume you already had that.

Upvotes: 2

Related Questions