Experiencing a peculiar issue that seems unrelated to z index - I originally had this as an a href and now changed it to a button, but both still have the same problem of mouse hover and mouse click NOT registering at all.
This is the HTML snippet:
<?php
//---------------------------------------------------------------------
echo '<div class="wrapper">';
echo '<h1 class = "abtHeader"></h1>';
echo '<div id = "paragraph"> <br></div>';
echo '<div id = "paragraph2"> </div>';
echo '<button type="submit" class="register-button" name="Register">Register</button>';
//echo '<a class "register" href = "../"><div>Register</div></a>';
echo '<ul class="bg-bubbles">';
echo '<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>';
echo '</ul>';
echo '</div>';
?>
Next is my CSS where I attempt to detect hover (but no change in background color occurs):
.register-button {
z-index: 5;
padding-top: 100px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
background-color: white;
border: 0;
padding: 10px 15px;
color: #53e3a6;
height: 50px;
border-radius: 5px;
width: 250px;
cursor: pointer;
font-size: 18px;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
}
.register-button:hover {
background-color: #f5f7f9;
}
Lastly, here's my javascript function which doesn't seem to be executing:
//Register
$(".register-button").on('click', function(e){
console.log("go to register");
header('Location: ../register');
});
I've attempted adjusting the z-index without success. What could be causing the lack of detection for mouse hover/click on my button?