jQuery图片链接的文字提示效果代码

发布时间：2018-08-22 13:10 所属栏目：121 来源：站长网

导读：图片链接上鼠标提示效果，主要是在图片上显示提示文字，当把鼠标移上后，图片上就出现了提示，移走后自动消失，其实用JS就能实现，不过为了让大家更了解 jQuery 插件，这里使用了jquery1.3.2来实现它，做的不好，请高手勿笑。网页演示：点击查看运行演

　　图片链接上鼠标提示效果，主要是在图片上显示提示文字，当把鼠标移上后，图片上就出现了提示，移走后自动消失，其实用JS就能实现，不过为了让大家更了解jQuery插件，这里使用了jquery1.3.2来实现它，做的不好，请高手勿笑。

　　网页演示：点击查看

　　运行演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>jQuery 图片提示</title> <style> .demo{margin:20px;} .demo ul li{position:relative;width:102px;height:102px;} .demo ul li a span{display:none;position:absolute;bottom:0;text-align:center;line-height:17px;padding:2px 0;background:#761AA2;width:100%;} .demo ul li:hover span{display:block;color:#fff;filter:alpha(opacity=70);opacity:0.7;} .demo ul li a img{border:#fff 1px solid;width:100px;height:100px;} .demo ul li a:hover img{border:#ddd 1px solid;} .demo ul li em{display:block;color:#f60;font-size:14px;height:20px;line-height:20px;} .demo ul li a{color:#000;} </style> </head> <body> <div class="demo"> <ul> <li> <a href="#"><img src="http://www.veryhuo.com/uploads/allimg/090221/1248530_lit.jpg"><span>评价521条<br/>售前咨询2052条</span></a> <em>￥1298</em> <a href="#">X5 华晨宝马</a> </li> </ul> <ul> <li> <a href="#"><img src="http://www.veryhuo.com/uploads/allimg/080905/0958410_lit.jpg"><span>评价189条<br/>售前咨询1011条</span></a> <em>￥1298</em> <a href="#">Z101 最爱笑脸</a> </li> </ul> </div> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：ASP站长网）