JS は、マウスがテキストの上を通過したときにフローティング レイヤー効果をポップアップさせます。

今回は、マウスがテキスト上を通過したときにフローティングレイヤーがポップアップする特殊効果を作成するJSを紹介します。JSを使用して、マウスがテキスト上を通過したときにフローティングレイヤーがポップアップする特殊効果を作成する場合の注意点を説明します。 . ここで実際のケースを見てみましょう。

たとえば、CSDN通知（新しい記事を書くページに入った後のページ上部のベルであるはずです）、具体的な実装は何ですか？上記のコード:

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车辆发车间隔异常     

---

    

      

以上がJS は、マウスがテキストの上を通過したときにフローティング レイヤー効果をポップアップさせます。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。