My latest project involves a simplistic website featuring arrow images (png) positioned on the left and right sides with fixed placement, allowing users to navigate to the next page.
However, an issue arises where the cursor seems unable to select the anchor element containing the image, resulting in this problem:
.
Here is the snippet of code for these elements:
<a class="arrow-left" href="previousPage.php"><img src="img/left.png"></a>
<a class="arrow-right" href="nextPage.php"><img src="img/right.png"></a>
The above code is written in plain HTML, while the .arrow-left and .arrow-right classes are styled using SCSS:
.arrow-right {
position: fixed;
max-width: 3%;
z-index: 10;
right: 1%;
top: 50%; }
.arrow-left {
position: fixed;
max-width: 3%;
z-index: 10;
left: 1%;
top: 50%; }