Sætte mouse over effekt på html element med jQuery

For at lave en mouse over, eller som det også kaldes, hover effekt på et element ved hjælp af jQuery kan du gøre følgende:

$("#mitid").hover(
    function () {
        $(this).css("background-color", "#33ff33");
    }
);

Dette vil sætte baggrundsfarven når man køre muser over elementet med id. Du kan i stedet for at ændre direkte på CSS og så benytte en CSS classe:

$("#mitid").hover(
    function () {
        $(this).addClass("min-hover-effekt");
    }
);

Koden ovenfor vil dog ikke fjerne effekten igen når du flytter musen væk fra elementet. Dette kan du gøre ved at tilføje en mouseout effekt.

$("#mitid").hover(
    function () {
        $(this).css("background-color", "#33ff33");
    },
    function () {
        $(this).css("backgrouns-color", "#fff");
    }
);

Her har jeg tilføjet en ekstra parameter til hover() funktionen, som er mouse out. Jeg har valgt at sætte farven til #fff, men du skal selvfølgelig sætte den til det der passer til dit behov.