在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是白色的时候不鼠标移过我需要它是绿色时，我需要它是红色的时候，我需要它被点击时，并保持红色，直到另一个按钮被点击。

感谢每个人的输入，特别是添加类和删除类案例，这是一个很好的教训，一旦我掌握了这项技术，我就会用到它。

Answer 1

问题是，当我单击该项目时，它会变成红色，但随后又会变成白色，我将鼠标悬停在它上面

如果您希望让click维护状态，最好使用类。试试这个：

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");
});

Answer 2

您可以使用CSS伪元素：:hover和:active。

或者，在使用jQuery时，使用.hover()和.click()方法。

Answer 3

只需将您的代码包装在一个$(document).ready(function() { // code here });中，它就会工作。