メニュー項目のホバー効果はページの高さ全体をカバーします

Question

私は左側のナビゲーションを開発しています。カーソルを合わせるとメニュー項目の前に赤いバーが表示されるようにしたいです。これは「ホーム」項目とそのサブ項目では機能しますが、他のルート項目ではホバー時に赤いバーがページの上から下まで幅全体に表示されます。

リーリー リーリー リーリー

赤いバーがメニュー項目の高さだけを占めるように修正するにはどうすればよいですか?

Answer 1

CSS を変更し、そこにコメントを追加しました。 DOM 構造に基づく CSS セレクターの問題

.left-bar.vertical.menu li .left-bar .vertical.menu > li の代わりに、スペースと >## を削除しました。 # すべての li が相対位置 を持つようになります

リーリー リーリー リーリー

Answer 2

赤の境界線を残しました。最初は白に設定されていました。

変更を加えました:

• 位置関連の CSS を含め、不要な CSS をすべて削除します。 もの＃＃＃
いくつかのクラスの代わりにクラスを使用してください
• [href] 「壊れやすい」と思います
わかりやすくするために、特定の
• 背景色 に変更します。 0 境界線を設定し、左境界線の詳細を追加します
• 一般的なブラウザは
16px
• = 1rem のサイズ基準を使用するため、px の代わりに rem を使用します。って。
コンテナに引き続き境界線を付け、CSS を使用してそれに関連する処理を行う場合は、次のように子を決定できます。

子がホバーされたときに親要素のスタイルを設定するにはどうすればよいですか?

あるいは、簡単な JavaScript を使用すると便利かもしれません。

リーリー リーリー リーリー