호버링이 작동하지 않음

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

이하이

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

코드 조각처럼 그것을 할 수 있습니다

Answer 2

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

같은 ~ 또는 + 같은 형제 선택기를 사용하여 선택되어야