title: How to turn mouse arrow into finger pointer on clickable background?
body: <p>I have a clickable two-part background wallpaper for my WordPress site. It works fine except for one thing: When hovering the mouse over the background, it remains an arrow instead of a finger pointer, so the reader has no clue that it's clickable.</p>
  
  <p>I've tried all sorts of things in the script section, to no avail. When I've gotten the finger pointer to appear over the background, it also appears everywhere else on the page where you happen to hover, whether there's a hyperlink there or not.</p>
  
  <p>Does anyone know how to get the finger pointer to appear over the background only?</p>
  
  <pre><code>&lt;style&gt;
  body { 
  background-image: url("/wp-content/uploads/2019/08/BottomBKG.png"), url("/wp-content/uploads/2019/08/TopBKG.png");
  background-color: #000000;
  background-repeat: no-repeat, no-repeat;
  background-position: center bottom, center top;
  background-size: 2000px 294px, 2000px 1368px;
  background-attachment: fixed, scroll;
  }
  &lt;/style&gt;
  
  &lt;script&gt;
  $('body').click(function(e){
  var url = $(this).prop('href');
      if (e.target === this) {
        window.open('http://URLGOESHERE.com', '_blank');
      }
  });
  &lt;/script&gt;
  </code></pre>