title: How to unbind() a hover/ mouseover event?
body: <p>My idea is very simple. I have a menu bar made from an unordered list of 3 items. Each item has an image coinciding with the title. I Photoshop'ed an 'active' version of each icon. Every time the list-item is hovered on, I wanted the src of the img to change to the 'active' icon. But I also want the 'active' icon to stay once clicked on. </p>
  
  <p>I have a general idea of how it's supposed to be written, but I've never used bind() or unbind() before </p>
  
  <p>I want to know the proper way to write the following:</p>
  
  <pre><code>function nav_handler() {
      $(".nav_services").hover(function() {
          var src = $(".nav_services img").attr("src", "files/img/services2.png");
          $(".nav_services").mousedown(function() {
              $(this).unbind(hover);
          });
      }, function() {
          var src = $(".nav_services img").attr("src", "files/img/services.png");
      });
  };
  </code></pre>
  
  <p>I don't think any of the HTML or CSS is necessary for this question, but I'll post it if you need it. This was an example of 1 of the 3 classes (list items), so I don't know if you can do it using it's parent and using children() and change the icon based on the return value of which child was hovered on or clicked on, but that would be even more helpful.</p>
  
  <hr>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Okay, so I used unbind correctly, but the src of the img in the list item will only change once. Meaning if I click all of them one at a time, the src will only change once. This is the full function I'm currently using:</p>
  
  <pre><code>function beta_handler() {
  //Hover for Nav-item #1 (Services)
  $(".nav_services").hover(function () {
      var src = $(".nav_services img").attr("src", "files/img/services2_active.png");
      $(".nav_services").mousedown(function () {
          if ($(".nav_home").hasClass("nav_active")) {
              $(".nav_home").removeClass("nav_active");
              var src = $(".nav_home img").attr("src", "files/img/home2.png")
              $(this).addClass("nav_active");
              //$(this).unbind("hover");
              $(this).unbind("mouseenter mouseleave");
          }
          else if ($(".nav_contact").hasClass("nav_active")) {
              $(".nav_contact").removeClass("nav_active");
              var src = $(".nav_contact img").attr("src", "files/img/contact2.png")
              $(this).addClass("nav_active");
              //$(this).unbind("hover");
              $(this).unbind("mouseenter mouseleave");
          }
      });
  }, function () {
      var src = $(".nav_services img").attr("src", "files/img/services2.png");
  });
  //Hover for Nav-item #2 (Home)
  $(".nav_home").hover(function () {
      var src = $(".nav_home img").attr("src", "files/img/home2_active.png");
      $(".nav_home").mousedown(function () {
          if ($(".nav_services").hasClass("nav_active")) {
              $(".nav_services").removeClass("nav_active");
              var src = $(".nav_services img").attr("src", "files/img/services2.png")
              $(this).addClass("nav_active");
              //$(this).unbind("hover");
              $(this).unbind("mouseenter mouseleave");
          }
          else if ($(".nav_contact").hasClass("nav_active")) {
              $(".nav_contact").removeClass("nav_active");
              var src = $(".nav_contact img").attr("src", "files/img/contact2.png")
              $(this).addClass("nav_active");
              //$(this).unbind("hover");
              $(this).unbind("mouseenter mouseleave");
          }
      });
  }, function () {
      var src = $(".nav_home img").attr("src", "files/img/home2.png");
  });
  //Hover for Nav-item #3 (Contact)
  $(".nav_contact").hover(function () {
      var src = $(".nav_contact img").attr("src", "files/img/contact2_active.png");
      $(".nav_contact").mousedown(function () {
          if ($(".nav_services").hasClass("nav_active")) {
              $(".nav_services").removeClass("nav_active");
              var src = $(".nav_services img").attr("src", "files/img/services2.png")
              $(this).addClass("nav_active");
              //$(this).unbind("hover");
              $(this).unbind("mouseenter mouseleave");
          }
          else if ($(".nav_home").hasClass("nav_active")) {
              $(".nav_home").removeClass("nav_active");
              var src = $(".nav_home img").attr("src", "files/img/home2.png")
              $(this).addClass("nav_active");
              //$(this).unbind("hover");
              $(this).unbind("mouseenter mouseleave");
          }
      });
  }, function () {
      var src = $(".nav_contact img").attr("src", "files/img/contact2.png");
  });
  };
  </code></pre>
  
  <p><a href="http://jsfiddle.net/pex42rk0/" rel="nofollow">Working Demo</a></p>