1/*You can only go to the immediately next sibling (with +) or to any next sibling (with ~).
2It is not possible to go up the HTML tree (to the parent). So it would be possible to go
3from a hover over .beta to a child of .alpha, if you switch the their position in the HTML DOM
4(.beta before .alpha). So, see this example:*/
5
6/*Css*/
7
8.alpha {
9 position:relative;
10 background-color:red;
11 width:100px;
12 height:50px;
13}
14
15.alpha .more {
16 position:absolute;
17 top:40%;
18 left:40%;
19 display:none
20}
21
22.beta {}
23
24.beta:hover + .alpha .more {
25 display:block;
26}
27
28/*Html*/
29
30<div class="beta">
31 <h3>Make hover</h3>
32</div>
33
34<div class="alpha">
35 <span class="more">Hello</span>
36</div>