title: combining mouseenter,mouseleave and click events in changing div background
body: <p>This is my current code and I've been trying to work it out for over an hour already:</p>
  
  <pre><code>$('#menu_list').bind('mouseenter mouseleave click', function(event){
      if(event.type == 'click') {
          $('#list_img').css('background-image', 'url(&lt;?=base_url()?&gt;/assets/css/images/list_active.png)');
          $('#add_img').css('background-image', 'url(&lt;?=base_url()?&gt;/assets/css/images/add_inactive.png)');
          $('#search_img').css('background-image', 'url(&lt;?=base_url()?&gt;/assets/css/images/search_inactive.png)');
          $('#list_text').css('color', 'black');
          $('#add_text').css('color', '#C0C0C0');
          $('#search_text').css('color', '#C0C0C0');
      } else if(event.type == 'mouseenter') {
          $('#list_text').css('color', 'black');
          $('#list_img').css('background-image', 'url(&lt;?=base_url()?&gt;/assets/css/images/list_active.png)');
      } else if(event.type == 'mouseleave') {
          $('#list_img').css('background-image', 'url(&lt;?=base_url()?&gt;/assets/css/images/list_inactive.png)');
      }
  });
  </code></pre>
  
  <p>What it should do is when I hover, the icon changes. But when I clicked, the icon stays on as active until I clicked on another item. There is no problem with the mouseenter/mouseleave. The problem starts with the click. Upon click, it does the job, but upon moving the mouse, the mouseleave function activates. Meaning the icon becomes inactive again.</p>