JSFiddle - React, Tailwind, and code Playground

by dtdxrk

HTML

<div id="a">A</div>
 <div id="b">B</div>
 <div id="c">C</div>
 <div id="copy"></div>

CSS

body { margin:0;padding:0; font-size:30px; text-align:center; font-family:"Courier New", Courier, monospace;}
 #a{ width:100px;  background-color:#ececec; margin-bottom:10px;height:100px;line-height:100px;}
 #b{ width:100px;  background-color:#ececec;height:100px;line-height:100px; }
 #c{position: absolute; top:0; left:110px;width:300px; height:210px;line-height:210px; background-color:#ececec;}
 #copy { display:none;position: absolute; border:2px solid #999; background-color:#ececec; width:100px; height:200px;}

JavaScript

var div = document.getElementsByTagName('div');
 
 for (var i = 0; i < div.length-1; i++){    //遍历div
     div[i].onmouseover = showDIV;
 }
 
 function showDIV(){
     
     var copy = document.getElementById('copy');
         copy.innerHTML = this.innerHTML;
         copy.style.display = 'block';
         copy.style.height  = 1.5*this.offsetHeight + 'px';
         copy.style.lineHeight  = 1.5*this.offsetHeight + 'px';
         copy.style.width  = 1.5*this.offsetWidth + 'px';
         copy.style.fontSize  = 60 + 'px';
         copy.style.top  = this.offsetTop + 'px';
         copy.style.left  = this.offsetLeft + 'px';
         
     copy.onmouseout = function(){
         this.style.display = 'none';
     }
 }