jquery - 在 JQuery 中使用悬停和单击更改 DIV 颜色

Question

有人可以帮忙吗？我有这两个:

我希望文本在悬停时更改为浅绿色，未悬停时更改为白色，单击时更改为红色。

$(".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%' });
});

提前谢谢

交流

注意:好吧，很抱歉我没有说清楚。

当鼠标悬停时，我需要 div 为白色 当鼠标悬停时我需要它是绿色的 我需要它在单击时呈红色，并保持红色直到单击另一个按钮。

感谢大家的意见，特别是添加类和删除类案例，这是一个很好的类(class)，一旦我进一步掌握了该技术，我将使用它。

Answer 1

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

如果您希望让点击保持状态，那么最好使用类。试试这个:

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