ホバリングしていない

Question

私はこのホバーがなぜ機能しないのか分かりません。負のZ-インデックスなどはありません。最高の場合、ホバリングで点滅します。

.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

ソリューション1

あなたはこの

.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>

以下のスニペットのようにそれを行うことができます

Answer 2

は.menuに兄弟であるため

.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>

よう ~又は +等兄弟セレクタを使用して選択されるべきです