title: How can i combine mouseover, mouseout and click. Without having .mouseout ruin .click
body: <p><strong>Situation</strong><br/>
  I have a div, when your mouse is over this div another appears. When you leave the div with your mouse it dissapears. But when you click it it has to stay even if you leave the div with your mouse.</p>
  
  <p><strong>Question</strong><br/>
  How can i make .click over rule .mouseout?</p>
  
  <p><strong>Code</strong><br/></p>
  
  <pre><code>$('.btn-morgen').mouseover(function() {
      $('#mapster_wrap_0 img').attr("src", '/media/ae/ae24c4cd276383e1474c6ebe93a127f3/950/kaartje.png');
      $('.gebied1').css("display","block");
      $('.gebied2').css("display","none");
  });
  $('.btn-singel').mouseover(function() {
      $('#mapster_wrap_0 img').attr("src", '/media/fe/feb86620fba224e28d5c7f4bf6307ece/950/kaartje.png');
      $('.gebied1').css("display","none");
      $('.gebied2').css("display","block");
  });
  $('#mapwrapper').mouseout(function () {
      $('#mapster_wrap_0 img').attr("src", '/media/c8/c88c72323acecefbab1ec173c5eb0b1a/950/kaartje.png');
      $('.gebied1').css("display", "none");
      $('.gebied2').css("display", "none");
  });
  $('#mapwrapper').mouseout(function () {
      $('#mapster_wrap_0 img').attr("src", '/media/c8/c88c72323acecefbab1ec173c5eb0b1a/950/kaartje.png');
      $('.gebied1').css("display", "none");
      $('.gebied2').css("display", "none");
  });
  $('.btn-morgen').click(function() {
      $('#mapster_wrap_0 img').attr("src", '/media/ae/ae24c4cd276383e1474c6ebe93a127f3/950/kaartje.png');
      $('.gebied1').css("display","block");
      $('.gebied2').css("display","none");
  });
  $('.btn-singel').click(function() {
      $('#mapster_wrap_0 img').attr("src", '/media/fe/feb86620fba224e28d5c7f4bf6307ece/950/kaartje.png');
      $('.gebied1').css("display","none");
      $('.gebied2').css("display","block");
      $('.btn-morgen').css("background-color","f4f0d3");
  });
  </code></pre>