Easy Jquery Hover

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:
esimerkkikuva

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.


Posted

in

by

Tags:

Comments

6 vastausta artikkeliin “Easy Jquery Hover”

  1. Tomi avatar

    Eikös tämä onnistu ihan a:hover?

  2. Timo L. avatar

    Olen käyttänyt pelkkää css:ää näissä tapauksissa. Taustakuva on oletuksena asetettu ylävasemmalle (top left) ja hoveroidessa (.class:hover) alas (bottom left). Ei toimi kaikilla IE:n versioilla, mutta ihan sama. Ei ainakaan ole niin raskas kuin tuo jQuery-ratkaisu.

  3. Jasmo avatar

    Joo, a:hover toimii täydellisesti, paitsi joillain IE-versioilla.

    Ideana jquery-ratkaisussa kuitenkin on se, että tällä toimii IE:llä myös buttoneissa, tai oikeastaan missä vain elementeissä hoverointi, kun taas :hover ei taida IE:llä pelata millään muulla elementillä kuin a.

  4. Erno avatar

    Jäin miettimään, että tarviiko jollain muulla kuin linkillä olla hoveria? Ei tule nyt mieleen.

  5. Jasmo avatar

    submit -painikkeella, olipa se sitten input tai button -elementti.

  6. Erno avatar

    Totta turiset. Ei se ihan turha kaveri sitä SQPO:n työtä koodannu ;)

Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *

This site uses Akismet to reduce spam. Learn how your comment data is processed.