title: CSS: Change Cursor over background-image
body: <p>I have a background image as part of a body class in CSS:</p>
  <pre><code>body.soon1 {
      background-color: white;
      background-image: url(soon1a.png);
      background-position: center;
      background-repeat: no-repeat;
  }
  </code></pre>
  <p>Then later on I have a javascript function that will change the body class.</p>
  <p>The reason I have the image in the background is that when the script activates, the background-color and the background-image will both change at exactly the same time and you can't select the image.</p>
  <p>Is it possible that I could change the cursor type only while hovering over the background-image?  I understand I can put</p>
  <pre><code>cursor: pointer;
  </code></pre>
  <p>in the body styles, but this makes the cursor appear over the entire page.</p>
  <p>You can view the <a href="http://www.paramesis.com" rel="nofollow noreferrer">live page, currently,</a> where the background changes when you click anywhere on the page.</p>
  <p>Edit: I've got something that works for me now.  I added a centered div with nothing in it:</p>
  <pre><code>div.clickme {
      width:300px;
      height:400px;
      position:absolute;
      left:50%;
      top:50%;
      margin:-150px 0 0 -200px;
      cursor: pointer;
  }
  </code></pre>
  <p>This works for me because I can set my own arbitrary area, but if anybody has a better solution, let me know.</p>