title: how to remove hover on click
body: <p>I'm working on a jQuery game. I have a 4 <code>div</code>s in a 2x2 design. The player needs to pick 1 option and verify with another button. The thing is, I have a hover effect adding a class which changes the background with a low opacity, and a click effect setting the background with a higher opacity. For <code>div</code>s 2, 3 and 4 it works fine - I hover and background changes color with opacity 0.3 and when I move the mouse out, it goes back to white. And when I click it, it changes the background to 0.4 and the hover doesn't affect them anymore. However, this is not working for the first div: the <code>div</code> changes background color on hover, but when I click it ,it keeps the hover color, and when I mouse out I see the click color, and every time I hover it changes the hover color again and so on.</p>
  <p>Why is it happening only on div 1?</p>
  <p>Code:</p>
  <pre><code>//hover effects
  $(&quot;.respuesta1,.respuesta2,.respuesta3,.respuesta4&quot;).hover(
  
  function () {
      $(this).addClass(&quot;respuestahover&quot;);
  },
  
  function () {
      $(this).removeClass(&quot;respuestahover&quot;);
  });
  
  //on click function for div1        
  $(&quot;.respuesta1&quot;).on(&quot;click&quot;, function () {
      //if it hasnt been clicked, toogle class and change var to true
      if (prendido1 == false) {
          $(this).toggleClass(&quot;respuesta1b&quot;);
          prendido1 = true;
  
          //if any of the other divs are clicked by the time you are clicking unclicked 1, turn them off
          if (prendido2 == true) {
              $(&quot;.respuesta2&quot;).toggleClass(&quot;respuesta2b&quot;);
              prendido2 = false;
          }
          if (prendido3 == true) {
              $(&quot;.respuesta3&quot;).toggleClass(&quot;respuesta3b&quot;);
              prendido3 = false;
          }
          if (prendido4 == true) {
              $(&quot;.respuesta4&quot;).toggleClass(&quot;respuesta4b&quot;);
              prendido4 = false;
          }
          //if is already clicked, turn off and change var to false
      } else {
          $(this).toggleClass(&quot;respuesta1b&quot;);
          prendido1 = false;
      }
  });
  </code></pre>
  <p>The last part is repeated for every div &quot;respuesta2&quot;, &quot;respuesta3&quot;, etc..</p>
  <p>Any idea?</p>
  <p><strong><strong>EDIT</strong></strong></p>
  <p>I was trying to clean up the code to make a jsFiddle and I think I got it to work:</p>
  <p><a href="http://jsfiddle.net/bqySN/2/" rel="nofollow noreferrer">http://jsfiddle.net/bqySN/2/</a></p>
  <p>I'll just leave the code there if anyone is interested, be aware the code is unpolished and it need more generalisations.</p>
  <p><em><strong>EDIT 2</strong></em></p>
  <p>After some testing I actually found the problem:</p>
  <p>if I alter the order of my css clases the app goes crazy:</p>
  <p>This one is correct, with hover first</p>
  <pre><code>.respuestahover{
      background-color:#f00;
      opacity:0.2;
  }
  
  .respuestab{
      background-color:#f00;
      opacity:0.5; 
  }
  </code></pre>
  <p>This one is incorrect, hover second:</p>
  <pre><code>.respuestab{
      background-color:#f00;
      opacity:0.5;
  }
  
  .respuestahover{
      background-color:#f00;
      opacity:0.2;
  }
  </code></pre>
  <p>I'm not really sure why it is behaving like that, but I'm glad I figure it out.</p>