Here's an interesting situation. I have an arrow that users click on to navigate to the next page in a photo gallery. The arrow image is wrapped in an anchor tag with the href attribute pointing to the next page, hardcoded into the HTML.
<a href="thepagetogoto08.html"><img src="images/next.gif" alt="Right arrow" class="hide"></a>
When it reaches the final page and I don't want the arrow to be visible or clickable, I simply add the class "hide".
In my CSS file, I define the hide class like this:
.hide {
visibility: hidden;
pointer-events: none;
cursor: default;
}
Interestingly, this setup works fine in Safari (desktop version, not yet tested on IOS) but does not work in Chrome, Firefox, or Opera. The arrow is hidden, but the cursor still changes to a hand pointer and the link remains active.
Could the issue with pointer-events functionality require a webkit prefix, or should I consider exploring alternative methods to achieve the desired behavior?