HTML,CSSの参考になれば

Web制作 2016.07.06

マウスを載せると階層化された子要素がプルダウン形式で表示させます。

【CSS】:hover疑似クラスで指定要素とは別の要素にスタイルを適用する

親要素がホバーされた時に子要素に変化を付ける方法

#parent:hover > #child{
color:white;
}

参考HTML

<ul id="nav">
 <li>メニュー</li>
 <ul id="sab-nav">
  <li>サブメニュー</li>
 </ul>
</ul>
#nav li:hover > #sub-nav {
 display:block;
}

かなり省略しているが、#sub-navは元はdisplay:block;をつけている状態です。

またこれだけでは、表示されたサブナビがその他のブロックに干渉するので絶対表示などを行いそれを避ける必要がある。

Hiroshi Uesugi

Toyonaka,Osaka

最後まで読んでいただきありがとうございます!
フロントエンドエンジニアとして、大阪でフリーランスとしてWeb制作をしています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です