3

大家好，我想在事件处理程序上更改 div 的类，例如鼠标悬停或 click() ..但我面临的问题是它不会改变切换类的效果。这是代码，请帮助我，谢谢。 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org        /TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>Untitled Document</title>

   <style type="text/css">


    .hello{

 background:#60C;


}
      .main{
width:300px;
height:300px;
background:#00F;
border-radius:10px;
}
    </style>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
     <script type="text/javascript" >


     $(function() {
        $("#event").bind("mouseover mouseleave", highlight);

        $("#event").bind("click", function(evt) {
             $("#event").toggleClass("hello"); 
            $("#event").unbind("mouseover mouseleave", highlight);
            $("#event").html("<p>You shut off the hover effect!</p>");
        });
    });

    function highlight(evt) {
        $("#event").toggleClass("high");        
    }


   </script> 
</head>


    <div class="main" id="event">
     This is a div click to highlight
     </div>

4

1 回答 1

3

您的代码适用于悬停状态，但您的 CSS 中没有high类。

.high {
     property: value
}

对于绑定/取消绑定您可以使用的事件on和off方法：

$(function() {
    $("#event").on("mouseover mouseleave", highlight);

    $("#event").on("click", function(evt) {
        $(this).toggleClass("hello");
        $(this).off("mouseover mouseleave", highlight);
        $(this).html("<p>You shut off the hover effect!</p>");
    });
});

function highlight(evt) {
    $("#event").toggleClass("high");
}

http://jsfiddle.net/t3B5Z/

于 2012-09-08T08:54:32.090 回答