JS implements mouse-triggered floating layer effect

This time I will bring you JS to realize the mouse-triggered floating layer effect. What are the precautions for JS to realize the mouse-triggered floating layer effect? ​​The following is a practical case, let’s take a look.

On some websites such as Renren and CSDN, when the mouse is hovering over something, a floating layer will pop up, and the floating layer will disappear when the mouse is moved away.

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 JS implements mouse-triggered floating layer effect. For more information, please follow other related articles on the PHP Chinese website!