Nicht funktioniert Hover

Question

Ich habe keine Ahnung, warum dieser Hover nicht funktioniert, gibt es keine negativen Z-Index oder so ähnlich. Bestenfalls blinkt es bei Hover;

.menu{ 
border-radius: 50%; 
width: 100px; 
height: 100px; 
background: white; 
box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19); 
background-image: url("home.png"); 
background-repeat: no-repeat; 
background-size: 60% 60%; 
background-position: 20px 15px; 
position: absolute; 
z-index: 1; 
} 
.menucontent{ 
    height:100px; 
    width: 400px; 
    box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19); 
    position: absolute; 
    display:none; 
} 
.menu:hover .menucontent{ 
    display: inline; 
} 

https://jsfiddle.net/jwwhj9rr/1/

Answer 1

Lösung 1

Sie können es tun, wie diese

.menu:hover ~.menucontent { 
    display: inline; 
} 

Snippet unten

.menu { 
 
    border-radius: 50%; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: white; 
 
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19); 
 
    background-image: url("home.png"); 
 
    background-repeat: no-repeat; 
 
    background-size: 60% 60%; 
 
    background-position: 20px 15px; 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 

 
.menucontent { 
 
    height: 100px; 
 
    width: 400px; 
 
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19); 
 
    position: absolute; 
 
    display: none; 
 
} 
 

 
.menu:hover ~.menucontent { 
 
    display: inline; 
 
}

<div class="menu" style="left: 100px; top: 100px; ;"></div> 
 
<div class="menucontent" style="left: 150px; top:100px;"></div>

Answer 2

.menucontent ist ein Geschwister .menu und somit ausgewählt werden sollte

.menu:hover + .menucontent { 
    display: inline; 
} 

.menu { 
 
    border-radius: 50%; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: white; 
 
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19); 
 
    background-image: url("home.png"); 
 
    background-repeat: no-repeat; 
 
    background-size: 60% 60%; 
 
    background-position: 20px 15px; 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 

 
.menucontent { 
 
    height: 100px; 
 
    width: 400px; 
 
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19); 
 
    position: absolute; 
 
    display: none; 
 
} 
 

 
.menu:hover + .menucontent { 
 
    display: inline; 
 
}

<div class="menu" style="left: 100px; top: 100px; ;"></div> 
 
<div class="menucontent" style="left: 150px; top:100px;"></div>

ein Geschwister Wähler wie ~ + oder dergleichen verwendet wird