Question

Havaing一个奇怪的问题，我已经得出结论与z索引没有关系 - 我首先把它作为一个href，现在有一个按钮，但两者都有同样的问题鼠标悬停和鼠标点击NOT被发现。完全没有。

我在这里回复html：

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

?>

然后我尝试检测悬停的CSS（背景颜色没有变化）：

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

然后我的javascript func没有执行L

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

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

    });

我已尝试将z索引向上移动，但这没有任何区别。为什么我的按钮上没有检测到鼠标悬停/点击？

Answer 1

我的代码中的按钮上有一个CSS悬停效果。关于js：尝试将<div> <div style="position:absolute;width:200px;background-color:#ff0;z-index:1;"> SHOULD BE ON BACK. SHOULD BE ON BACK. SHOULD BE ON BACK. SHOULD BE ON BACK. SHOULD BE ON BACK. </div> <div style="position:relative;width:300px;background-color:#0f0;z-index:999999;"> SHOULD BE ON FRONT. SHOULD BE ON FRONT. SHOULD BE ON FRONT. SHOULD BE ON FRONT. </div> </div>更改为header('Location: ../register');

Fiddle

Answer 2

该代码没有任何问题。事实上，如果你把它加载到一个片段，它工作正常。我只能看到问题：

在您的评论<a class "register" href = "../"><div>Register</div></a>中，=之后您遗失了class。但这无关紧要。
header('Location: ../register');是php，而不是javascript。正如上面提到的德米特里，为了实现这一目标，你需要像window.location.href = "../register";

请发布您的实际代码或呈现的HTML，也许我们可以帮助发现问题。

请参阅下面的代码段，CSS工作正常并应用了样式：

//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

你创建了一个动态按钮，然后你需要创建函数并在点击时调用该函数，如

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

那是因为你在你的HTML之前放置了js代码吗？然后当jquery找到dom时，它没有被渲染，所以jquery不能绑定监听器。

 $this->db->select('*');
    $this->db->from(FIRST TABLE NAME);
    // IF Field name is common in both table use this way 
    $this->db->join_using(SECOND TABLE NAME,'FIELD NAME');
    //other wise 
    $this->db->join(SECOND TABLE NAME,'1st table FIELD NAME=2nd table Field name');    
     $query = $this->db->get();

Demo

或者你可以像这样改变你的js代码：

see code in the jsfiddle below

CSS / Javascript - 按钮和链接没有检测到悬停或点击？即使z指数最高？

4 个答案: