Question

我正在搞乱网站的一些导航，我想要在屏幕右侧浮动三张图片（我有）。然后，我希望能够将鼠标悬停在其中一个图像上，并在该图像旁边弹出一个菜单。我可以用一个这样做，但是一旦我在垂直序列中引入下一个图像，第一个图像就会停止工作。为什么呢？

我的HTML：

<DIV id="parent"><a href="#issue49"><img src = "images/parent.png"></a></DIV>
<DIV id="student"><a href="#issue49"><img src = "images/student.png"></a></DIV>
<DIV id="teacher"><a href="#issue49"><img src = "images/staff.jpg"></a></DIV>

<DIV id="pnavi"> <a href="#issue49"><img src = "images/parent.png"></a></DIV>

我的CSS：

#parent {
  width: 50px;
  position: fixed;
  top: 20px;
  right: 0;
  z-index: 1;
}

#student {
  width: 50px;
  position: fixed;
  top: 70px;
  right: 0;
  z-index: 1;
}

#teacher {
  width: 50px;
  position: fixed;
  top: 120px;
  right: 0;
  z-index: 1;
}

#parent:hover + #pnavi {
  visibility: visible;
}

#pnavi {
  position: fixed;
  float: right;
  width: 100px;
  height: 50px;
  top: 20px;
  right: 0px;
  z-index: 1;
  visibility: hidden;
}

如果我评论学生和老师DIV，请将鼠标悬停在父节目#pnavi上。删除评论（甚至在DIV之后添加一个休息符），一切都停止。

小提琴是here

我目前已注释掉了第二个DIV，以便悬停起作用（第一次使用Fiddle，所以我希望我做对了..）。

Answer 1

使用+（direct adjacent combinator）时，每侧的元素必须与兄弟姐妹相邻。因此，在您的情况下，#pnavi必须在#parent之后的标记上（并且因此在DOM上）。

还有indirect adjacent combinator，~，只需要元素为兄弟，但不能直接相邻。所以你可以使用#parent:hover ~ #pnavi。不过，我不确定浏览器支持。它适用于我的Mac上的Chrome。请参阅demo。

将鼠标悬停在多个并发DIV上

1 个答案: