When the mouse is placed on the text, a floating layer pops up

This time I will bring you the method of placing the mouse on the text to pop up the floating layer, and placing the mouse on the text to pop up the floating layer. For example, the CSDN notification (should be the bell at the top of the page after entering the page to write a new article), what is the specific implementation? The above code:

nbsp;html> 
 
<meta> 
 <title>TEST</title> 
 
<style> 
 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> 
 //显示悬浮层 
 function showInform(){ 
 document.getElementById("inform").style.display=&#39;block&#39;; 
  // document.getElementById("inform").css("display","block"); 
 } 
 //隐藏悬浮层 
 function hiddenInform(event){ 
  var informp = document.getElementById(&#39;inform&#39;); 
  var x=event.clientX; 
  var y=event.clientY; 
  var px1 = informp.offsetLeft; 
  var py1 = informp.offsetTop; 
  var px2 = informp.offsetLeft + informp.offsetWidth; 
  var py2 = informp.offsetTop + informp.offsetHeight; 
  if( x < px1 || x > px2 || y < py1 || y > py2){ 
  document.getElementById(&#39;inform&#39;).style.display=&#39;none&#39;; 
  } 
  
 } 
 
 
</script> 
 
 <a> 
 警告消息 
 </a> 
 <p> 
  </p>

                                                                                                    

     编号5005车辆发车间隔异常     

---

    

     编号5005车辆发车间隔异常     

---

    

     编号5005车辆发车间隔异常     

---

    

     编号5005车辆发车间隔异常     

---

    

     编号5005车辆发车间隔异常     

---

    

     编号5005车辆发车间隔异常     

---

    

     编号5005车辆发车间隔异常     

---

    

     编号5005车辆发车间隔异常     

---

    

      

The above is the detailed content of When the mouse is placed on the text, a floating layer pops up. For more information, please follow other related articles on the PHP Chinese website!