Question

我想要做的是将文档上的边框从蓝色更改为不同的内容，最好是清除。任何想法？

为什么这不起作用？

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

Jquery边框颜色切换问题

4 个答案: