JS 跟隨光標的提示框

時間  2019-11-17
標籤 跟隨 光標 提示 欄目 JavaScript 简体版
原文   原文鏈接 

<html>   
  <head>   
  <title>test</title>   
  <mce:script type="text/javascript"><!--
   
  function   clickTextInput(){   
  var   msgDiv   =   document.getElementById("msg");   
  msgDiv.innerText="you   click   the   text   input.";   
  }   
    
  function   mouseOverTextInput(){   
  var   msgDiv   =   document.getElementById("msg");   
  msgDiv.innerText="your   mousr   over.";   
  }   
    
  //頁面內元素的onmouseover事件的處理方法   
  document.onmousemove=function(){   
  if(event.srcElement.hint) {   
  a.style.display="block";   
  a.innerHTML=event.srcElement.hint;   
  a.style.left=window.event.clientX+10;   
  a.style.top=window.event.clientY+10;   
  setTimeout("a.style.display='none'",8000);   
  }else{   
  a.style.display="none"   
  }   
  }   
  
// --></mce:script>   
  </head>   
  <body>   
  <form>   
  <table>   
  <tr>   
  <td><input   name="yourname"   hint="這是一個輸入框"   type="text"   onclick="clickTextInput();"   onmouseover="javascript:mouseOverTextInput();"   />   
  <input hint="sssss"/>
  
  </tr>   
  </table>   
  <p>
    <input type="submit" name="Submit" value="提交" hint="mmmmmm" />
    <select name="select" hint="xxxxx">
      <option value="w">ss</option>
      <option value="w">w</option>
      <option value="t">e</option>
      <option value="s">d</option>
    </select>
  </p>
  <div   id="msg"   ></div>   
    
  <div   id="a"   style="position:absolute;font-size:9pt;display:none;border:1px   solid   black;background:lightyellow" mce_style="position:absolute;font-size:9pt;display:none;border:1px   solid   black;background:lightyellow">   </div>   
  </form>   
  </body>   
  </html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程