Question

我正在为网站创建导航菜单... 我使用css：hover函数将display标记从none更改为inline-block。

我之前已经多次这样做了，完全没有问题。但现在它似乎不起作用。

这是我最简单的代码：当.parent div元素悬停时，.child div元素应该出现。

任何人都知道为什么不这样做？

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

将孩子放入父母 - 悬停工作不需要链接：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 3

您的孩子div不在父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;
}

CSS：悬停标签不起作用？ display：none to inline-block

4 个答案: