Css

Pitkästä aikaa vähän kunnon datailua kehiin. Tänään esittelen helpon tavan tehdä yksinkertaisia ”hover” -efektejä napeille. Tarvitset ainoastaan Jquery-kirjaston ja avot. $(document).ready(function(){ $(".hilight").hover( function(){ $(this).css("background-position", "0 -" + $(this).height() + "px"); }, function(){ $(this).css("background-position", "0 0"); } ); }); Sitten tarvitset vielä hoverointiin sopivan kuvan, esimerkiksi tällaisen: Voit käyttää tuota sitten näin: <style> .hilight{ background-position: 0 0; background-repeat: no-repeat; border: 0; cursor: pointer; display: block; } </style> {...} <a class="hilight" style="background: url(poista.jpg); width: 40px; height: 24px;" href="#"></a> Demonstraatiota tämän menetelmän käytöstä voi kattoo vaikka http://www.paitashop.fi. Tosin siellä se ei ollut vielä aivan näin ”hienostunut”. Käytännössähän tuo jquery-osuus pitää kirjoittaa kerran, css-pitää kirjoittaa kerran, joten aika vähällä vaivalla tuo hoverointi sitten näiden töiden jälkeen syntyy. Toimii myös buttoneilla, jne.