Jquery Border Color Toggle Issue

Question

Jquery Border Color Toggle Issue

0

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

Текущий код: 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");
};

};

Bryan W. 24 сен. 2013, в 22:30

Источник

Теги:

javascript

jquery

html

css

4 ответа

0

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

Vural Acar 24 сен. 2013, в 18:47

0

.hover и .mouseout не правильный способ сделать это. Вы должны использовать .on
Warre Buysse 24 сен. 2013, в 20:06

0

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

});

JKirchartz 24 сен. 2013, в 18:23

0

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

Warre Buysse 24 сен. 2013, в 17:15

Ещё вопросы

.hover и .mouseout не правильный способ сделать это. Вы должны использовать .on

matewka · Accepted Answer · 2013-09-24T17-39-00.000Z

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

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