qq_遁去的一_1
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758<!doctype html><html><head><meta charset="utf-8"><title>鼠标移入显示文本</title><link href="my.css" rel="stylesheet" type="text/css"><style>#body1{width:960px; height:auto; margin:20px auto 0px auto}#body1 ul{}#body1 li{float:left; width:239px; text-align:center; height:318px; position:relative}#body1 img{ position:absolute; top:0px; left:5px}#body1 span{display:block; position:absolute; background:#666; height:70px;bottom:0px; left:5px; width:220px;color:#fff; opacity:0.7}</style><script src="jquery-1.3.2.min.js"></script><script>$(function(){ $('#body1 li').find('span').hide(); //隐藏全部 $('#body1 li').hover(function(){ $(this).find('span').stop(true,true).slideDown(); },function(){ $(this).find('span').stop(true,true).slideUp(); }); });</script></head><body> <div id="body1"> <ul> <li> <a href="#"> <img src="img/3.jpg" /> <span>说明内容说明内容说明内容说明内容</span> </a> </li> <li> <a href="#"> <img src="img/4.jpg" /> <span>说明2内容说明内容说明内容说明内容</span> </a> </li> <li> <a href="#"> <img src="img/5.jpg" /> <span>说明3内容说明内容说明内容说明内容</span> </a> </li> <li> <a href="#"> <img src="img/6.jpg" /> <span>说明4内容说明内容说明内容说明内容</span> </a> </li> </ul> </div> </body></html>第二种：还有一种是用的css3实现的，实现原理：刚开始框就存在了，只不过透明度为全透明，鼠标移入后透明度不透明就显示出来了，框稍微动画一些的话就用到css3的旋转之类的了。如下图123456789101112131415161718192021222324252627282930313233343536373839404142434445<!doctype html><html><head><meta charset="utf-8"><title>css3练习</title><link href="my-1.css" rel="stylesheet" type="text/css"><style>#bt{width:100%; height:50px; font-size:20px; background:#06F; color:#fff; text-align:center; line-height:50px; margin-bottom:10px}figure{position:relative; width:33.33%; height:270px; float:left; overflow:hidden}figure img{width:100%; opacity:0.9;transition: all 0.35s;}figcaption{position:absolute; top:10px; left:10px; color:#fff; font-family:"微软雅黑"}@media screen and (max-width:600px){ figure{width:100%} }@media screen and (max-width:1000px) and (min-width:601px){ figure{width:50%} }@media screen and (min-width:1001px){ figure{width:33.33%} }.d2{background:#000}.d2 figcaption{width:100%; height:100%;}.d2 figcaption h2{margin-top:10%;margin-left:15%}.d2 figcaption p{margin-top:5%;margin-left:15% ;transform:translate(0px,50px); opacity:0}.d2 figcaption div{width:80%; height:60%; border:5px solid white; position:absolute; top:10%; left:10%; transform:translate(0px,-210px) rotate(0deg)}.d2:hover figcaption div{ transform:translate(0px,0px) rotate(180deg);}.d2:hover img{ opacity:0.7}.d2:hover figcaption p{margin-top:5%;margin-left:15%; font-size:17px; font-weight:bold; transform:translate(0px,0px);opacity:1}/*----------------------------end-------------------------------------------*/</style> </head> <body><div id="bt">CSS3.0的样式练习</div> <figure class="d2"> <img src="img/48.jpg"/> <figcaption> <h2>旋转动画</h2> <p>飞来飞去，飞来飞舞</p> <div></div> </figcaption></figure></body></html>