jQuery实现仿即时通信软件空间装扮预览图片的鼠标提示效果代码

本文实例讲述了jQuery实现仿即时通信软件空间装扮预览图片的鼠标提示效果代码。分享给大家供大家参考，具体如下：

这是一款仿腾讯网即时通信软件空间装扮预览图片的鼠标提示效果，感应鼠标显示图片的介绍信息，当你把鼠标移到图片上的时候，图片的背景会有所变化，并会显示该图片的对应文字内容，是即时通信软件空间使用过的效果。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-f-qq-zone-pic-view-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题仿即时通信软件空间装扮预览图片的鼠标提示效果/title meta http-equiv=' content-type ' content=' text/html；charset=GB 2312 '样式类型=' text/CSS ' * { margin :0；划水：0;font-size :12 px线高：150%;} .clearfix:after在{content:'之后。显示：块；高度：0;clear:both可见性：隐藏；}.clear fix { display : inline-block；} # wrap { width :900 pxmargin :0 auto }。good _ list { padding:0 0 30px 13px背景# f8f8f8border:1px实心# eaeaeamargin-top :50 px；}.项目{ float : leftmargin 336013 px 13 px 0 0位置：相对；}.好{ padding:8px }。goodOp { padd :2 pxborder :1 px实心# a8a 8；宽度宽度：180像素背景# fffont-size :0；}.goodHover { padding:0px位置：绝对；z指数：9966669；top :-40px；左侧：-4px；宽度宽度：210像素宽度：204像素。好高清{背景： URL(图片/imghover。巴布亚新几内亚)；宽度宽度：210像素宽度：204像素。好高清H2 { font-size :12 px；文本对齐：居中；填充-top :12 px；}.好高清p { color : # 9c 9 c9c文本对齐：居中；}.古德哈德img { padding-left :12 px；}/style脚本src=' http : jquery-1。6 .2 .量滴js ' type=' text/JavaScript '/script script type=' text/JavaScript ' $(function(){ $(' # list。项目').悬停(function(){ $(this)).查找('。好悬停').show()；}，function(){ $(this).查找('。好悬停').hide()；});});/script/head dydiv id=' wrap ' div class=' good _ list clear fix ' id=' list ' div class=' item ' style=' z-index :10 ' div class=' good ' div class=' good op ' img src=' http : images/1。gif '/div/div class='良好悬停'样式='显示3360无' div class='良好高清' H2西班牙/h2 p点击图片预览装扮/p div class=' img ' div class=' Goodop ' img src=' http : images/1。gif '/div/div/div/class=' item ' style=' z-index :9 ' div class=' good ' div class=' Goodop ' img src=' http : images/2。gif '/div/div class=' Goodhover ' style=' display : one ' div class=' Goodhd ' H2西班牙/h2 p点击图片预览装扮/p div class=' img ' div class=' Goodop ' img src=' http : images/2。gif '/div/div/div/class=' item ' style=' z-index :8 ' div class=' good ' div class=' Goodop ' img src=' http : images/3。gif '/div/div class=' Goodhover ' style=' display : one ' div class=' Goodhd ' H2西班牙/h2 p点击图片预览装扮/p div class=' img ' div class=' GoodOp ' img src=' http : images/3。gif '/div/div/div/div/div class=' item ' style=' z-index :7 ' div class=' good ' div class=' GoodOp ' img src=' http : images/4。gif '/div/div class='良好悬停'样式='显示：无' div class='良好高清' H2西班牙/h2 p点击图片预览装扮/p div class=' img ' div class=' GoDop ' img src=' http : images/4。gif '/div/div/div/div/div/div/body/html希望本文所述对大家jQuery程序设计有所帮助。