版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/nalan77/article/details/85379738
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标滑过文字信息动态出现</title>
<style>
*{margin: 0;padding: 0;}
ul,ol{list-style: none;}
*, *:after, *:before{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.clearfix:after{content: ".";height: 0;overflow: hidden;display: block;clear: both;}
*html .clearfix{height: 1%;}
.imgtxt li{position: relative;float: left;width: 400px;height: 400px;margin-right: 20px;color: #ccc;line-height: 1.8em;cursor: pointer;transition: all 1s;overflow: hidden;}
.imgtxt li img{width: 100%;}
.imgtxt li h2{margin: 30px 0 20px 0;font-weight: normal;font-size: 16px;}
.imgtxt li p{font-size: 18px;}
.imgtxt .text{position: absolute;left: -9999px;top: 0;width: 100%;height: 400px;padding-top: 50px;padding-left: 30px; background: rgba(0,0,0,.5);}
</style>
<script src="js.js"></script>
</head>
<body>
<ul class="imgtxt" id="imgtxt">
<li>
<img src="images/img1.jpg" alt="">
<div class="text">
<h1>卜算子·我住长江头</h1>
<h2>宋代：李之仪</h2>
<p>我住长江头，君住长江尾。<br>日日思君不见君，共饮长江水。<br>此水几时休，此恨何时已。<br>只愿君心似我心，定不负相思意。</p>
</div>
</li>
<li>
<img src="images/img2.jpg" alt="">
<div class="text">
<h1>唐多令|惜别</h1>
<h2>吴文英</h2>
<p>何处合成愁？离人心上秋。<br>纵芭蕉不雨也飕飕。都道晚凉天气好；有明月，怕登楼。<br>年事梦中休，花空烟水流。<br>燕辞归、客尚淹留。垂柳不萦裙带住，漫长是、系行舟。</p>
</div>
</li>
<li>
<img src="images/img3.jpg" alt="">
<div class="text">
<h1>清明日对酒</h1>
<h2>宋代：高翥</h2>
<p>南北山头多墓田，清明祭扫各纷然。<br>纸灰飞作白蝴蝶，泪血染成红杜鹃。<br>日落狐狸眠冢上，夜归儿女笑灯前。<br>人生有酒须当醉，一滴何曾到九泉。</p>
</div>
</li>
</ul>
</body>
</html>window.onload=function(){
var imgtxt=document.getElementById("imgtxt");
var lis=imgtxt.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
(function(arg){
lis[arg].onmouseover=function(){
var text=lis[arg].getElementsByClassName("text")[0];
text.style.left="0px";
};
lis[arg].onmouseout=function(){
var text=lis[arg].getElementsByClassName("text")[0];
text.style.left="-9999px";
};
})(i);
}
}匿名函数和函数闭包，用css也可以实现效果……