CSS：悬停标签不起作用？(CSS :hover tag not working? display: none to inline-block)

我正在为网站创建导航菜单...我正在使用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> 
  
 

I'm creating a nav menu for a website... I'm using the css :hover function change the display tag from none to inline-block.
 

I've done this many times before with absolutely no problems. Now however it does not seem to work.
 

This is my code in its simplest form: When the .parent div element is hovered over, the .child div element is supposed to appear.
 

Anyone know why it's not doing that?
 

 
 
  
  
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> 
  
 


                
最满意答案

                
                    
                        
 尝试这个） 
 
<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/ 
Try this)
 
<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;
}
 

live - https://jsfiddle.net/d26L7juy/

更多推荐