JQuery Border Color Toggle Issue

Question

То, что я пытаюсь сделать, это изменить границы документа с синего на что-то другое, желательно ясно, если что-нибудь. Есть идеи?

Текущий код: http://jsfiddle.net/NqTuv/

Почему это не работает?

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

Ваш код полный беспорядок! Я обновил ваш fiddle. Он должен выглядеть следующим образом:

$(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

Проверить эту скрипку 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

Ваш jsfiddle работает скрипт onload, но также включает в себя слушатель для документа готов, мой раз 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"); 
}); 

}); 

Answer 4

Вы делаете путь, чтобы на самом деле получить то, что вы хотите. Это правильный способ сделать это: Я также добавил эффект «зависания» на заголовок, который вы хотите. Не используйте .hover, это устарело (не используется больше). Вместо того, чтобы использовать "$('#yourdiv").on('mouseenter', 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"); 
    }); 
});