0

hover隣接する要素に CSS を適用しようとしています。私のCSSは次のようになります。

.class1:hover + .class2 {}

メニューになりそうです。ホバーすると.menuNormal.mnuExtended表示されるはずです。これは私の HTML/CSS です:

<style>
.menuNormal {width:100px; height:100px; background-color:FFF}
.menuExtended {width:100px; height:100px; background-color:green; display:none;}
.menuNormal:hover + .menuExtended{display:block;}
</style>

<body>
<div class="menuNormal">
<p>hover to unfold extra menu</p>
</div>

<div class="menuExtended">
<p>here are some menu buttons</p>
</div>
</body>

.menuExtendedからdisplay:noneに変更しようとしてdisplay:blockいますが、うまくいかないようです。私がやっていることは何か間違っていますか?

4

2 に答える 2