title: jQuery Hover - UnHover not functioning
body: <p>I've looked through the other related posts to my question already over the past hour or so and tried out various fixes for them, but it still doesn't work, so here it goes:</p>
  
  <p>I have a website, located at www.rooms101.com my client wants me to add a page-peel effect, so I am using an example from <a href="http://www.sohtanaka.com/web-design/simple-page-peel-effect-with-jquery-css/" rel="nofollow noreferrer">http://www.sohtanaka.com/web-design/simple-page-peel-effect-with-jquery-css/</a> and I have copied the code and images directly from the site to test it out, but for some reason it doesn't work.</p>
  
  <p>jQuery code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $('#pageflip').hover(function() { //On hover...
          $("#pageflip img , .msg_block").stop()
              .animate({ //Animate and expand the image and the msg_block (Width + height)
                  width: '307px',
                  height: '319px'
              }, 500);
      },
      function() {
          $("#pageflip img").stop() //On hover out, go back to original size 50x52
              .animate({
                  width: '50px',
                  height: '52px'
              }, 220);
          $(".msg_block").stop() //On hover out, go back to original size 50x50
              .animate({
                  width: '50px',
                  height: '50px'
              }, 200); //Note this one retracts a bit faster (to prevent glitching in IE)
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML (contained inside the body tag and above the page wrapper):</p>
  
  <pre><code>&lt;div id="pageflip"&gt;
      &lt;a id="pageflip-a" href="#"&gt;
          &lt;img src="http://Rooms101.com/page-peel/page_flip.png" alt="" /&gt;
          &lt;span class="msg_block"&gt;Layaway Your Vacation Today&lt;/span&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I also tried a simple effect of changing a div's color on hover, which can be found in the green box at the bottom left of the page, also it is not working...
  HTML:</p>
  
  <pre><code>&lt;div class="box" style="width: 20px; height: 20px; background-color: green;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(document).ready(function() {
      $('.box').hover(function() {
              $(this).css({ background: 'blue' });
          },
          function() {
              $(this).css({ background: 'black' });
          });
  });
  </code></pre>
  
  <p>Thanks in advance for the help, this problem has utterly perplexed me.</p>
  
  <p>EDIT: I went ahead and tried this on my personal website with the exact same code, and to basically no surprise it functions as it should...I must say I really do hate inheriting crappy code from lazy designers...</p>
  
  <p>Unfortunately they don't understand just how bad their code is...so if anyone can offer a reason as to why this is not functioning and a "hack" fix for the time being that would be appreciated.</p>