title: jquery: hover function only if element is not .clicked
body: <p>I have been trying to set up the following script without success. </p>
  
  <p>I have the element #num_11 which fades in a couple of other elements on hover and fades them out on mouseout. That's working perfectly (which I am already quite proud of)</p>
  
  <p>What I want is that if you CLICK on #num_11 that the other elements STAY visible. On click again, they should disappear again and the whole script go back to the original "mode"</p>
  
  <pre><code>$("#num_11").hover(
      function(){
          $("#identification li").each(function() {
              $("h1", this).fadeIn();
              $("span", this).addClass("opague");
          });
      },
      function(){
          $("#identification li").each(function() {
              $("h1", this).hide();
              $("span", this).removeClass("opague");
          });
      }
  );
  
  $("#num_11").click(function(){
      $(this).toggleClass('clicked');
  });
  </code></pre>
  
  <p>What I have tried in the code above was putting  $("#num_11").not(".clicked").hover( and  $("#num_11:not(".clicked")").hover( as well as a if-else-query which ended up in chaos…</p>
  
  <p>I would really appreciate your help with my challenge.</p>
  
  <p>All the best,
  K</p>