Azonos szinten lévő HTML tag függő CSS formázása
Néha előfordul olyan igény, hogy egy html kódban egy adott résznél a vele azonos, azaz nem alá rendelt tartalmi részt szeretnénk függő módon formázni.
Pl.:
<style>
.figyel {width:60px; height:32px; line-height:32px; padding:0 10px; display:block; background:#888; color:#fff; border:none; border-radius:2px;}
.valt {color:#090; opacity:0; transition: ease all 600ms;}
.figyel:hover ~ .valt {opacity:1;}
</style>
<button class="figyel">GOMB</button>
<span class="valt">Ez a gomb az!</span>
Ez a gomb az!
A fenti példa egy szürke gombot tesz ki, ami hoverre az azt követő span tartalmát megjeleníti (opacity + transition). A fenti megoldásban rejlő lehetőségek egyik példája megtalálható itt:
Rádió gomb egyedi átalakítása 1. verzió