jQuery图片链接的笔墨提醒结果代码

发布时间：2018-09-01 14:27:26 所属栏目：编程来源：站长网

导读：图片链接上鼠标提醒结果，首要是在图片上表现提醒笔墨，当把鼠标移上后，图片上就呈现了提醒，移走后自动消散，着适用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>
提醒：可修改儿女码再运行!

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

MYSQL_框架之主从GTID	MySQL Online DDL的实
MySQL 5.7 mysqldumps	MySQL TEXT、DATE、SE