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?

Can you show us some working code where we can see the issue and debug it? — Shrabanee, May 31 '16 at 04:50
On what browser is this experienced ? Would it be on safari-mobile? If so, [see here](http://stackoverflow.com/questions/37504446/my-jquery-toggleclass-function-is-creating-a-hyperlink-effect-on-touchscreen-dev/37515539#37515539) — Louys Patrice Bessette, May 31 '16 at 05:33

Dmitry · Answer 1 · 2016-05-31T09:29:46.740

2

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

edited May 31 '16 at 09:29

answered May 31 '16 at 05:09

Dmitry

304
1
13

Good correction on code... But still does'nt answers the main problem of the `hover` effect. Well, `click` was certainly bugging... Ok. ;) Uncomplete answer. – Louys Patrice Bessette May 31 '16 at 05:44
@Louys Patrice Bessette, Except this error, everything works correctly. Fiddle: https://jsfiddle.net/mitwebulus/xn4b3mru/ – Dmitry May 31 '16 at 09:28

score 1 · Accepted Answer · edited Jun 30 '16 at 03:13

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>

score 1 · Answer 3 · answered May 31 '16 at 05:30

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>

score 0 · Answer 4 · answered May 31 '16 at 05:22

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'); 
        }); 
    }
);

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

4 Answers4