Question

当另一个div悬停/点击时，正在努力显示div，例如下拉导航菜单。

如果div（最初是隐藏的）在我正在盘旋的div中，如果有意义的话，我可以让它工作吗？像这样：

<div class="red2">
  <p>button</p>
  <div id="inside-div">Text Here</div> 
</div>

我希望隐藏的div位于其他div之外时可以正常工作，如下所示：

<div class="red"><p>button</p></div>    
<div id="separate-div">Text Here</div>

Fiddle

顶部按钮不执行任何操作，因为隐藏的div位于其外部，即使我只是复制并粘贴了代码，底部按钮也能正常工作。

思考？

Answer 1

您要查找的是adjacent sibling selector +，或者您也可以使用general sibling selector ~，其严格程度低于相邻的。{/ p>

.red {
  display: inline-block;
  position: relative;
  background-color: #ee9094;
  width: 7.5em;
  min-height: 7.5em;
  text-align: center;
  color: #fff;
  line-height: 75px;
  transition: background-color 0.2s ease;
}
#separate-div {
  display: none;
  position: relative;
  float: right;
  background-color: #D9D9D9;
  max-width: 20em;
  font-size: 1.6em;
}
.adjacent .red:hover + #separate-div {
  display: inline-block;
}
.sibling .red:hover ~ #separate-div {
  display: inline-block;
}

<div class="adjacent">
  <div class="red">
    <p>button</p>
  </div>
  <div id="separate-div">Text Here</div>
</div>
<hr /> 
<div class="sibling">
  <div class="red">
    <p>button</p>
  </div>
  <div>Some random text here</div>
  <div id="separate-div">Text Here</div>
</div>

如何将一个div悬停在另一个分开的div上

1 个答案: