javaScript實現鼠標在文字上懸浮時彈出懸浮層效果

2024-05-06 16:43:19

字體：大中小

來源：轉載

供稿：網友

在人人，CSDN等一些網站，當鼠標在某個東西上懸浮時，會彈出一個懸浮層，鼠標移開懸浮層消失。

比如說CSDN的通知（應該是進入寫新文章的頁面后頁面上方的那個鈴鐺），具體是什么實現的呢？上代碼：

<!doctype html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>TEST</title> </head> <style type="text/css">  body{  position: relative;  }  #inform{   position: absolute;   top: 20px;   width: 350px;   max-height: 250px; /* 設置最大高度，當高度達到此值時出現滾動條 */   z-index: 10;   background-color: #E0E5E5;   overflow: auto;  /* 自動添加滾動條 */   box-shadow:0px 0px 10px #000; /* 外陰影 */   display: none; /* 默認隱藏 */  }  #informTable{  table-layout:fixed;  /* 用于實現表格td自動換行的部分代碼*/  width: 325px;  }   #informTable tr td{  width: 325px;  height:30px;  font-size: 16px;  font-family: Georgia;  color: #555555;  word-wrap:break-word; /*自動換行*/  padding: 0 0 0 0;  }  #informTable tr td:hover{  background-color: #D9D9D9;  }  #inform hr{  border:1;  width: 325px;  margin-bottom: 0px;  }  </style> <script type="text/javascript">  //顯示懸浮層  function showInform(){  document.getElementById("inform").style.display='block';   // document.getElementById("inform").css("display","block");  }  //隱藏懸浮層  function hiddenInform(event){   var informDiv = document.getElementById('inform');   var x=event.clientX;   var y=event.clientY;   var divx1 = informDiv.offsetLeft;   var divy1 = informDiv.offsetTop;   var divx2 = informDiv.offsetLeft + informDiv.offsetWidth;   var divy2 = informDiv.offsetTop + informDiv.offsetHeight;   if( x < divx1 || x > divx2 || y < divy1 || y > divy2){   document.getElementById('inform').style.display='none';   }    }   </script> <body>  <a id="btn" onMouseOver="javascript:showInform();" onMouseOut="hiddenInform()">  警告消息  </a>  <div id="inform" onMouseOver="javascript:showInform();" onMouseOut="hiddenInform(event)">   <table id="informTable">   <tr>   <td>    編號5005車輛發(fā)車間隔異常    <hr/>   </td>   </tr>   <tr>   <td>    編號5005車輛發(fā)車間隔異常    <hr/>   </td>   </tr>   <tr>   <td>    編號5005車輛發(fā)車間隔異常    <hr/>   </td>   </tr>   <tr>   <td>    編號5005車輛發(fā)車間隔異常    <hr/>   </td>   </tr>   <tr>   <td>    編號5005車輛發(fā)車間隔異常    <hr/>   </td>   </tr>   <tr>   <td>    編號5005車輛發(fā)車間隔異常    <hr/>   </td>   </tr>   <tr>   <td>    編號5005車輛發(fā)車間隔異常    <hr/>   </td>   </tr>   <tr>   <td>    編號5005車輛發(fā)車間隔異常    <hr/>   </td>   </tr>   </table>  </div> </body> </html>

效果圖如下：

js鼠標懸浮彈出懸浮層,js鼠標懸浮,js彈出懸浮層,js鼠標懸浮彈出效果