title: css pointer-events: none not working in chrome
body: <p>This is a weird one. I have a an arrow that a user clicks to go to the next page (it's a photo gallery). So, I have the arrow image wrapped in a tag with the href directing to the next page. It's hard coded.</p>
  
  <pre><code> &lt;a href="thepagetogoto08.html"&gt;&lt;img src="images/next.gif" alt="Right arrow" class="hide"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>On the final page, when I don't need an arrow and don't want the user clicking to get a non-existent page I add the class "hide". </p>
  
  <p>In my style sheet I have:</p>
  
  <pre><code>.hide {
    visibility: hidden;
    pointer-events: none;
    cursor: default;
  }
  </code></pre>
  
  <p>The weird thing is that it actually works in Safari (desktop, not tested on IOS yet) but not in chrome, Firefox or opera. The arrow is hidden but the cursor finger pointer pops up and the link is still active.</p>
  
  <p>Are pointer-events something that needs a webkit or is it best to just find some other way to do this?</p>