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
いますが、うまくいかないようです。私がやっていることは何か間違っていますか?