css - CSS: :hover と兄弟セレクター

Question

私の設計では、このクラスを宣言する必要がある場合があります。

.panel {
  position: fixed;
  top: 100vh; 
  height: 90vh;
  margin: 0px;
  padding: 0px;
  width: 100%;
  transition-property: top;
  transition-duration: 1s;
}

.panel:before {
  background-color: inherit;
  top: -1.5em;
  width: 10em;
  text-align: center;
  font-weight: bold;
  content: attr(id);
  position: absolute;
  border-bottom: none;
  border: .5em solid black;
  border-top-color: inherit;
  border-left-color: inherit;
  border-right-color: inherit;
  border-bottom: none;
  border-radius: 25%;
  border-bottom-right-radius: 0%;
  border-bottom-left-radius: 0%;
}

つまり、パネルは、<a href="panel id">foo</a>スタイル リンクを介してターゲットにされたときに飛び込むタブです。

デフォルトの状態では、パネルは画面のすぐ下に配置されます。これにより、非表示のパネル オブジェクトの行が作成され、その前は画面の下部にタブとして表示されます。

これらのパネルの HTML は<section id="about" class="panel color">...</section>(カラー クラスは現時点では効果的に表示されますが、特定のタブの目的を反映するようにアップグレードされます。

したがって、私が解決しようとしている課題は、ステータス バーがパネル タブをブロックすることで、これは気分が悪いと感じます。解決策は、リンクがホバーされたときにタブを少し (3 または 4 VH) 持ち上げることだと思います。これにより、ステータス バーの整合性、リンクの整合性、およびサイトの外観が保持されます。ステータスバーをウィンドウのサイズ変更のように扱います。

これが正しい解決策だと信じていa:hover ~ * .panel { top: 97vh; }ましたが、発火していないようです。