recherche

Maison >interface Web >js tutoriel >Lorsque la souris est placée sur le texte, un calque flottant apparaît

Lorsque la souris est placée sur le texte, un calque flottant apparaît

php中世界最好的语言
php中世界最好的语言original
2018-05-08 16:14:043200parcourir

Cette fois, je vais vous apporter les précautions pour placer la souris sur le texte pour faire apparaître un calque flottant, et pour placer la souris sur le texte pour faire apparaître un calque flottant. Ci-dessous, un cas pratique, voyons. jetez un oeil.

Par exemple, la notification du CSDN (devrait être la cloche en haut de la page après être entré sur la page pour écrire un nouvel article), quelle est l'implémentation spécifique ? Code ci-dessus : 

<!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 informp = document.getElementById('inform'); 
  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('inform').style.display='none'; 
  } 
  
 } 
 
 
</script> 
<body> 
 <a id="btn" onMouseOver="javascript:showInform();" onMouseOut="hiddenInform()"> 
 警告消息 
 </a> 
 <p id="inform" onMouseOver="javascript:showInform();" onMouseOut="hiddenInform(event)"> 
  <table id="informTable"> 
  <tr> 
  <td> 
   编号5005车辆发车间隔异常 
   <hr/> 
  </td> 
  </tr> 
  <tr> 
  <td> 
   编号5005车辆发车间隔异常 
   <hr/> 
  </td> 
  </tr> 
  <tr> 
  <td> 
   编号5005车辆发车间隔异常 
   <hr/> 
  </td> 
  </tr> 
  <tr> 
  <td> 
   编号5005车辆发车间隔异常 
   <hr/> 
  </td> 
  </tr> 
  <tr> 
  <td> 
   编号5005车辆发车间隔异常 
   <hr/> 
  </td> 
  </tr> 
  <tr> 
  <td> 
   编号5005车辆发车间隔异常 
   <hr/> 
  </td> 
  </tr> 
  <tr> 
  <td> 
   编号5005车辆发车间隔异常 
   <hr/> 
  </td> 
  </tr> 
  <tr> 
  <td> 
   编号5005车辆发车间隔异常 
   <hr/> 
  </td> 
  </tr> 
  </table> 
 </p> 
</body> 
</html>

Le rendu est le suivant :

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour en savoir plus. informations passionnantes, veuillez prêter attention au site Web chinois php Autres articles connexes !

Lecture recommandée :

Comment implémenter l'expression de jugement v-show dans Vue

Comment convertir des objets non-tableaux en tableaux

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée de l'utilisation des calculs et des méthodesArticle suivant：Explication détaillée de l'utilisation des calculs et des méthodes

Articles Liés

Voir plus