JS实现的鼠标功能


<html>
  <head>
    <script language=javascript>
  var tDiv;
function showTitle(){
      if(!tDiv){
tDiv = document.createElement("div");
tDiv.innerHTML='我现在没什么好说的，你要说什么就说吧';
tDiv.className='tDiv';
document.body.appendChild(tDiv);
      }else tDiv.style.visibility='visible';
}
function hiddTitle(){
if(tDiv)tDiv.style.visibility='hidden';
}
    </script>
    <style>
     .tDiv{
     position:absolute;
     border:1px solid black;
     background-color:yellow
     }
    </style>  </head>
  
  <body>
    <div title='我现在没什么好说的，你要说什么就说吧，但过不久就消失了'>把鼠标放上来试试（title 实现）</div>
    <div onmouseover='showTitle()' onmouseout='hiddTitle()'>把鼠标放上来试试（div 实现）</div>
  </body>
</html>

解决方案 »

  1.   

    那个是JS模拟title效果，或者是JS模拟ALT效果
    你搜索下
      

  2.   

    以下改造了3楼的代码, 测试通过<html>
      <head>
    <style>
            .tDiv{
                position:absolute;
                border:1px solid black;
                background-color:yellow
            }
        </style>
        <script language=javascript>
        var tDiv; // 提示信息div
    var flag = false; // 是否隐藏提示标志 /**
     * 显示提示信息
     */
        function showTitle(){
          tDiv.innerHTML = '我现在没什么好说的，你要说什么就说吧';
          tDiv.className = 'tDiv';
    tDiv.style.display = '';
    flag = false;
        } /**
     * 隐藏提示信息
     */
        function hideTitle(){
          if (!flag) {
    tDiv.style.display = 'none';
          }
        } window.onload = function() {
    tDiv = document.getElementById("myTip");
    tDiv.onmouseover = function() {
    flag = true;
    }
    tDiv.onmouseout = function() {
    this.style.display = "none";
    }
    }
        </script>
      </head>
      
      <body>
        <div onmouseover='showTitle()' onmouseout='setTimeout("hideTitle()",200)'>把鼠标放上来试试（div 实现）</div>
    <div id="myTip"></div>
      </body>
    </html>