title: JQuery switching cursor icons
body: <p>I have a WordPress site with a video on the front page.</p>
  
  <p>This video plays automatically.  I want the user to be able to stop it by clicking.  This has been answered elsewhere and this works.</p>
  
  <p>HOWEVER I want to swap the cursor icon depending on whether the next click will play or pause the video.</p>
  
  <p>Currently I have:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt; 
  jQuery(document).ready(function() {
      jQuery("#videointro").hover(function(event) {
          if(event.type === "mouseenter") {
              jQuery(this).attr("controls", "");
          } else if(event.type === "mouseleave") {
              jQuery(this).removeAttr("controls");
          }
      });
  
  });
  &lt;/script&gt; 
  </code></pre>
  
  <p>and css of:</p>
  
  <pre><code>#videointro:hover {
      cursor:url(images/ButtonPause-01.png), auto;
  }
  </code></pre>
  
  <p>...and basically no clue as to where I can go with this.</p>
  
  <p>Hoping someone can shine a light on this please.</p>
  
  <p>Cheers
  Dave</p>