CSS：ホバータグが機能していませんか？ display：none to inline-block

Question

私はウェブサイト用のnavメニューを作成しています... 私はcss：hover関数を使用していますdisplayタグをnoneからinline-blockに変更しています。

これまで何度も何度もやったことがありますが、何の問題もありません。しかし、今は動作していないようです。

これは最も簡単な形式のコードです。 .parent div要素が上に移動すると、.child div要素が表示されます。

誰もがそれをしていない理由を知っていますか？

a { 
 
    text-decoration: none; 
 
    color: #000; 
 
    font-size: 20px; 
 
} 
 
.parent { 
 
    width: 200px; 
 
    height: 100px; 
 
    background-color: #999; 
 
    display: inline-block; 
 
} 
 
.child { 
 
    display: none; 
 
    width: 200px; 
 
    height: 100px; 
 
    background-color: #333; 
 
} 
 
.parent:hover .child { 
 
    display: inline-block; 
 
}

<a href=""> 
 
    <div class="parent">Parent</div> 
 
</a> 
 
<a href=""> 
 
    <div class="child">Child</div> 
 
</a>

Answer 1

はライブ

<a href=""> 
    <div class="parent">Parent</div> 
</a> 
<a href=""> 
    <div class="child">Child</div> 
</a> 

a { 
    text-decoration: none; 
    color: #000; 
    font-size: 20px; 
} 
.parent { 
    width: 200px; 
    height: 100px; 
    background-color: #999; 
    display: inline-block; 
} 
.child { 
    display: none; 
    width: 200px; 
    height: 100px; 
    background-color: #333; 
} 
a:hover + a .child { 
    display: inline-block; 
} 

）これを試してみてください - https://jsfiddle.net/d26L7juy/

Answer 2

親に子供を入れて - ホバーが機能するためのリンクは必要ありません。

a { 
 
    text-decoration: none; 
 
    color: #000; 
 
    font-size: 20px; 
 
} 
 
.parent { 
 
    width: 200px; 
 
    height: 100px; 
 
    background-color: #999; 
 
    display: inline-block; 
 
} 
 
.child { 
 
    display: none; 
 
    width: 200px; 
 
    height: 100px; 
 
    background-color: #333; 
 
} 
 
.parent:hover .child { 
 
    display: inline-block; 
 
}

<div class="parent">Parent 
 
    <a href=""> 
 
    <div class="child">Child</div> 
 
    </a> 
 
</div>

Answer 3

をあなたの子div要素が内部ではなかったです親部門

<div class="parent"> 
    <div class="child"> 
    </div> 
</div> 

Answer 4

<a href="" class="parent"> 
    <div>Parent</div> 
</a> 
<a href="" class="child"> 
    <div>Child</div> 
</a> 

.parent:hover + .child { 
    display: inline-block; 
}