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

Question

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 1

I had a CSS hover-effect on button from your code. About js: try to change header('Location: ../register'); to window.location.href = "../register";

Fiddle

Answer 2

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"></h1> <div id="paragraph"> <br> </div> <div id="paragraph2">T</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> 

Answer 3

you create a dynamic button then you need to create function and call that function on click like

Buttuon

<button type="submit" class="register-button" name="Register" onclick="bClick()" onmouseover="mOver(this)" onmouseout="mOut(this)">Register</button>

JavaScript

<script type="text/javaScript">

function bClick(){
    console.log("go to register");
    header('Location: ../register');
}

function mOver(obj) {
    this.style.backgroundColor='#f5f7f9';return true
}

function mOut(obj) {
    this.style.backgroundColor='#fff';return true
}

</script>

Answer 4

Is that because you place you js code before you html? Then when the jquery find the dom,it's not rendered,so jquery can't bind the listener on that.

see code in the jsfiddle below

Demo

or you can just change you js code like this:

$(document).ready(
    function() { 
        $(".register-button").on('click', 
            function(e){ console.log("go to register");
            header('Location: ../register'); 
        }); 
    }
);