CODEWITHSUNDEEP
jquery
Junaid Akhtar
Junaid Akhtar

Reputation: 569

Jquery toggle class function not working

Hello all i want to change class of my div on event handlers like mouse over mouse out or click() ..But i m facing problem that it does not change the effect of toggle class.here is the code please help me out thanks. 

 <!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>

Upvotes: 3

Views: 2171

Answers (1)

Ram
Ram

Reputation: 144689

Your code works for hover states but you don't have a high class in your css.

.high {
     property: value
}

For binding/unbinding the events you can use on and off methods:

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

Upvotes: 3

Related Questions