Question

我以前曾经遇到过这样的问题。我似乎无法弄清楚我在这里似乎做错了什么。

<!DOCTYPE HTML>
<html>
 <head>
<style type="text/css"> 
div#rightSideContent {
width:48%;
height:100%;
float:right;
margin-left:10px;
position: relative;
}
span.explain_pass {
background:#111111;
color:#b4b4b4;
position: absolute;
top:-150px;
left:-17px;
padding:10px;
width:200px;
opacity: 0.9;
border-radius:5px;
}
span.explain_pass:after {
content: ' ';
position: absolute;
left:50%;
transform:translate(-50%);
bottom:-19px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 20px solid #111111;
}
div#content {
width:100%;
margin: 300px;
}
</style>
<script type="text/javascript">
 var showHint = { 

 timeOut : null,

 hint : function(obj) {
clearTimeout(showHint.timeOut);

showHint.timeOut = null;
 var explain_pass = document.createElement("span");
explain_pass.setAttribute("id","explain_pass");
explain_pass.classList.add("explain_pass");
explain_pass.textContent = obj.dataset.title;

if(!document.getElementById('explain_pass')) {
document.getElementById('rightSideContent').appendChild(explain_pass);
}





if(showHint.timeOut == null) {
document.getElementsByClassName('questionMark')[0].addEventListener('mouseleave',function() {

    console.log(showHint.timeOut);
    showHint.timeOut = setTimeout(function(){

        try{
           document.getElementById('rightSideContent').removeChild(document.getElementById('explain_pass'));
        }
        catch(e) {}



    },3000);


    }  );


    }
    }
     }

    window.onload = function() {

document.getElementsByClassName('questionMark')[0].addEventListener('mouseenter',function(){
showHint.hint(this);
});

}
</script>
</head>
<body>

  <div id="content">
   <div id="rightSideContent">

  <label for="password" class="inputColumn">Password <span 
  class="required">*</span> <span class="questionMark" data-title="Must 
  contain at least 2 characters long including lowercase characters, 
  uppercase characters, and numbers"><svg width="20" fill="#333333" 
  height="20" xmlns="http://www.w3.org/2000/svg" style="pointer- 
   event:none;" viewBox="0 0 512 512"><path d="M504 256c0 136.997-111.043 
   248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 
  248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 
  12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 
  17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 
  32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 
  216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0- 
   28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531- 
   102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46- 
   20.636 46-46c0-25.365-20.635-46-46-46z"/></svg></span> <input 
   name="password" class="passRestrict" id="password" type="password" 
   placeholder="Password" maxlength="255" autocomplete="off" /> <span  
    class="showHidePass">show</span></label>

</div>

<div>
</body>
 </html>

我在提示脚本开始时清除了超时，但是即使我的鼠标没有离开我悬停的对象，超时仍然会运行并最终删除提示框。任何提示和帮助将不胜感激。

谢谢，乔恩·W

当clearTimeout被称为Javascript时，setTimeout仍然运行

0 个答案: