1

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

我的 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 之后添加一个中断），这一切都停止了。

小提琴在这里

我目前已将后两个 DIV 注释掉，以便悬停工作（第一次使用 Fiddle，所以我希望我做得对..）。

4

1 回答 1

0

使用+（直接相邻组合器）时，每边的元素必须是相邻的兄弟。因此，就您而言，#pnavi必须紧跟#parent在标记之后（因此，在 DOM 上）。

还有一个间接相邻的组合子, ~，它只要求元素是兄弟元素，而不是直接相邻。所以你可能会使用#parent:hover ~ #pnavi. 不过，我不确定浏览器是否支持。它适用于我 Mac 上的 Chrome。见演示。

于 2012-08-15T01:17:05.253 回答