1

サイトのナビゲーションをいじっていて、画面の右側に3つの画像が浮かんでいる必要があります(私は持っています)。次に、画像の 1 つにカーソルを合わせて、その画像の横にメニュー ポップアップを表示できるようにしたいと考えています。これは 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 の後にブレークを追加する) と、すべて停止します。

フィドルはこちら

ホバーが機能するように、2 番目の 2 つの DIV を現在コメントアウトしています (Fiddle を初めて使用するので、正しく実行したことを願っています..)。

4

1 に答える 1

0

+(直接隣接コンビネータ)を使用する場合、両側の要素は隣接する兄弟でなければなりません。したがって、あなたのケースでは、マークアップの直後 (および結果として DOM の#pnavi直後) にある必要があります。#parent

要素が兄弟であることのみを必要とし、互いに直接隣り合っている必要はない間接隣接コンビネータもあります。~だからあなたは使うかもしれません#parent:hover ~ #pnavi。ただし、ブラウザのサポートについてはわかりません。私のMacのChromeで動作します。デモを参照してください。

于 2012-08-15T01:17:05.253 に答える