Changing DIV colors using hover and click in JQuery

click, colors, hover, jquery, load

Solution

The problem is when i click the item it turns red but then it reverts to white and i hover off it

If you are looking to have the `click` maintain state you are better off using classes. Try this:

a { color: white; }
.active { color: red; }
.hover { color: lightgreen; }

$(".music").hover(
    function() {
        $(this).addClass("hover");
    }, 
    function() {
        $(this).removeClass("hover");
    }
);

$(".music").click(function () { 
    $('#result').load('album_list_index.php');
    $(".music").removeClass("active");
    $(this).removeClass("hover").addClass("active");
});

Example fiddle

Problem

Could someone please help. I have these two: I would like the text to change to lightgreen when hovering, white when not hovering, and red when clicked. ``` $(".music").hover( function() { $(this).css('color','lightgreen'); }, function() { $(this).css('color', 'white'); } ); $(".music").click(function () { $('#result').load('album_list_index.php'); $(this).css({ 'color': 'red', 'font-size': '100%' }); }); ``` Thank you in advance AC NOTE: ok im sorry i did not make myself clear. I need the div to be white when not mousedover I need it to be gree when mouseover And i need it to be red when clicked, and remain red until another button is clicked. Thanks everyone for the input, expecialy the add class and remove class cases, that was a good lesson I will use once i master the technique a bit more.

Original source