不工作悬停

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

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

被选择