javascript - Jquery Border Color Toggle Issue

Question

What I am attempting to do is change the borders on a document from blue to something different, preferably clear if anything. Any Ideas?

Current Code: http://jsfiddle.net/NqTuv/

Why is this not working?

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

};

Answer 1

Your code is a complete mess! I updated your fiddle. It should look like this:

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

Answer 2

Check this fiddle http://jsfiddle.net/NqTuv/2/

$(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");
  });
  $(".guess_box").mouseout(function(){
    //this is the mouseleav event handel
    $(this).removeClass("my_hover");
  });
});

Answer 3

Your jsfiddle is running the script onload, but you also include a listener for document ready, my the time the onload event happens the document is already ready; your other issues were syntax, mostly missing closing parenthesis.

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

});

Answer 4

You are doing way to much to actually get what you want. This is a proper way to do it: I also added the "hover" effect on the header that you want. Don't use .hover, that's deprecated (not in use anymore). Instead use "$('#yourdiv").on('mouseenter', yourfunctionname); and $('#yourdiv").on('mouseleave', yourfunctionname);

Hopefully this helped. ;) Please ask if you need more answers.

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