Javascript Jquery边框颜色切换问题

我试图做的是将文档的边框从蓝色更改为其他颜色，如果有任何更改，最好是清晰的。有什么想法吗

当前代码：

为什么这不起作用

Jquery：

$(document).ready(function(){

    $("#btn1").click(function(){
            $("#header").addClass("hover");
            $("#header").removeClass("no_hover");
    };
    $("#btn2").click(function(){
        $("#header").removeClass("hover");
        $("#header").addClass("no_hover");
    };

$(".guess_box").hover(function(){
    //This is the mouseenter event handler
    $(this).addClass("my_hover");
};
function(){
    //this is the mouseleav event handel
    $(this).removeClass("my_hover");
};

};

---

你的代码乱七八糟！我更新了你的密码。应该是这样的：

$(document).ready(function(){
    $("#btn1").click(function(){
        $("#header").addClass("hover");
        $("#header").removeClass("no_hover");
    });
    $("#btn2").click(function(){
        $("#header").removeClass("hover");
        $("#header").addClass("no_hover");
    });
});

检查这把小提琴

---

您的JSFIDLE正在运行脚本

onload

，但是您还包括一个用于文档就绪的侦听器，my当

onload

事件发生时，文档已经是

ready

；您的其他问题是语法，主要是缺少右括号

$(document).ready(function(){

    $("#btn1").click(function(){
            $("#header").addClass("hover");
            $("#header").removeClass("no_hover");
    });
    $("#btn2").click(function(){
        $("#header").removeClass("hover");
        $("#header").addClass("no_hover");
    });

$(".guess_box").hover(function(){
    //This is the mouseenter event handler
    $(this).addClass("my_hover");
},
function(){
    //this is the mouseleav event handel
    $(this).removeClass("my_hover");
});

});

---

你正在做很多事情来真正得到你想要的。这是一种正确的方法： 我还添加了你想要的标题“悬停”效果。不要使用.hover，它已被弃用（不再使用）。改为在（'mouseenter'，yourfunctionname）上使用“

$（'#yourdiv”）.on”

和

$（'#yourdiv'）。在（'mouseleave'，yourfunctionname）；

希望这有帮助。；）请询问您是否需要更多答案

$(document).ready(function(){
    $("#btn1").click(function(){
        $("#header").addClass("hover");
        $("#header").removeClass("no_hover");
    });
    $("#btn2").click(function(){
        $("#header").removeClass("hover");
        $("#header").addClass("no_hover");
    });

    $('#header').on('mouseenter', function(){
        $("#header").addClass("hover");
        $("#header").removeClass("no_hover");
    });

    $('#header').on('mouseleave', function(){
        $("#header").addClass("no_hover");
        $("#header").removeClass("hover");
    });
});

---

您的代码充满语法错误。请检查您的javascript控制台，并使用jsfiddle上的JSHint按钮。hover和.mouseout不是正确的方法。您应该使用.on

$(document).ready(function(){
    $("#btn1").click(function(){
        $("#header").addClass("hover");
        $("#header").removeClass("no_hover");
    });
    $("#btn2").click(function(){
        $("#header").removeClass("hover");
        $("#header").addClass("no_hover");
    });

    $('#header').on('mouseenter', function(){
        $("#header").addClass("hover");
        $("#header").removeClass("no_hover");
    });

    $('#header').on('mouseleave', function(){
        $("#header").addClass("no_hover");
        $("#header").removeClass("hover");
    });
});