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%' });
});

提前谢谢

AC

注意：好的，对不起，我没有说清楚。

我需要div不是mousedover时是白色的当鼠标移动时我需要它是格力我点击时需要它是红色的，并保持红色直到单击另一个按钮。

感谢大家的输入，特别是添加类和删除类案例，这是一个很好的教训，一旦我掌握了更多的技术，我将使用它。

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

Example fiddle

Answer 2

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

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

Answer 3

只需将代码包装在$(document).ready(function() { // code here });中即可。

Answer 4

建议使用CSS ...但仍然可以使用jquery

  $(document).ready(function(){
        $(".music").mouseover(function() {
           if(!$(this).hasClass('dontchange')){
              $(this).css('color','lightgreen');
           }
        });
        $(".music").mouseout(function() {
               if(!$(this).hasClass('dontchange')){
                $(this).css('color', 'white');
             }
        }

        $(".music").click(function () { 
         $(this).addClass('dontchange');
        $('#result').load('album_list_index.php');
        $(this).css({ 'color': 'red', 'font-size': '100%' });
        });
        });

使用悬停更改DIV颜色并单击JQuery

4 个答案: