CSS: Hover on element inside div, change element style inside another div

Question

I have two divs. I want to change style an element inside a div, when hover an element inside another div.

In the next example I want to show more when hover over h3

It's possible only with css?

See example:

.alpha {
 position:relative;
 background-color:red;
 width:100px;
 height:50px;
}

.alpha .more {
 position:absolute;
 top:40%;
 left:40%;
 display:none
}

.beta {}

.beta h3:hover + .alpha .more {
 display:block;
}

<div class="alpha">
 <span class="more">Hello</span>
</div>

<div class="beta">
 <h3>Make hover</h3>
</div>

See http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered. — Shiva127, Mar 16 '17 at 13:39
[Unfortunately, not possible](http://stackoverflow.com/a/42655293/3162554) — Marvin, Mar 16 '17 at 13:42

ssc-hrep3 · Answer 1 · 2017-03-16T13:51:32.963

You can only go to the immediately next sibling (with +) or to any next sibling (with ~). It is not possible to go up the HTML tree (to the parent). So it would be possible to go from a hover over .beta to a child of .alpha, if you switch the their position in the HTML DOM (.beta before .alpha). So, see this example:

.alpha {
  position:relative;
  background-color:red;
  width:100px;
  height:50px;
}

.alpha .more {
  position:absolute;
  top:40%;
  left:40%;
  display:none
}

.beta {}

.beta:hover + .alpha .more {
  display:block;
}

<div class="beta">
  <h3>Make hover</h3>
</div>

<div class="alpha">
  <span class="more">Hello</span>
</div>

CSS: Hover on element inside div, change element style inside another div

1 Answers1

Linked