skyguy skyguy - 5 months ago 11
HTML Question

CSS/Javascript - button and link not detecting hover or click? Even with z index highest?

Havaing an odd problem that I've concluded does not have to do with z index - I first had this as an a href and now have a button but with both had the same problem of mouse hover and mouse click NOT being detected. At all.

I echo html here:

<?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>';

?>


Then my CSS where I try to detect hover (no change in background color made):

.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;
}


Then my javascript func which is not executedL

//Register
$(".register-button").on('click', function(e){
console.log("go to register");

header('Location: ../register');

});


I've tried moving the z index up however this makes no difference. Why isn't mouse hover/click detected on my button?

Answer

There's nothing wrong with that code. In fact, if you load it into a snippet it works fine. Only problems I can see:

  • In your commented out <a class "register" href = "../"><div>Register</div></a> you are missing = after class. But that's irrelevant.
  • header('Location: ../register'); is php, not javascript. As Dmitry mentioned above, for that to work you'd need something like window.location.href = "../register";

Please post your actual code or the html that's rendered, and maybe we can help spot the problem.

See snippet below, CSS works fine and styles are applied:

//Register 
$(".register-button").on('click', function(e) {
  $('.console').html('.register-button clicked');

});
.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;
}
.console {
  color: blue;
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="wrapper">
  <h1 class="abtHeader">Astrum.xyz</h1>
  <div id="paragraph">Astrum - Latin for star, glory, and immortality.
    <br>
  </div>
  <div id="paragraph2">This social network was created by Skylar Thomas and Zac Hardy in May, 2016.</div>
  <button type="submit" class="register-button" name="Register">Register</button>
  <div class="console"></div>
  <div>Register</div>

  <ul class="bg-bubbles">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>