个人练习-jq 鼠标移上移出查看图片（放大）提示

只做了个简单的效果，以后可以加上动画等效果，实际效果如下：

html 代码：

<div class="wrap">
    <ul class="img_list clr">
        <li><a href="images/22.jpg" title="枫叶" class="tooltip"><img src="images/22.jpg"></a> </li>
        <li><a href="images/33.jpg" title="江南小城" class="tooltip"><img src="images/33.jpg"></a> </li>
        <li><a href="images/44.jpg" title="绚烂如我" class="tooltip"><img src="images/44.jpg"></a> </li>
    </ul>
</div>

css代码：

.wrap{ width: 960px; margin:50px auto; border:1px solid #F00; min-height: 100px; }
.img_list{ padding:50px 10px 50px 40px; }
.img_list li{ position: relative; float: left; width: 250px; margin-left: 20px; height: 250px; border: 1px solid #ddd; }
.img_list li img{ width: 250px; height: 250px; }
#showPic{ position: absolute; z-index: 111; width: 400px; height: 400px; }
#showPic img{ width: 400px; height: 400px; }
#showPic p{ position: absolute; bottom:0; left: 0; right:0; z-index: 112; height: 24px; color: #fff; background:rgba(0,0,0,0.4); line-height: 24px; padding: 0 20px; font-size: 14px; }

js 代码：

  $("a.tooltip").mouseover(function(){ //鼠标移上去
        var picHref = this.href; //找到a标签中的链接
        var picTitle = this.title;//找到a标签的标题
        var picHtml = "<div id='showPic'><img src='"+ picHref +"'><p>"+ picTitle +"</p></div>";
        $(this).parents("li").append(picHtml); // 添加div
        $("#showPic").css({  //设置div的top/left/boder值
            "border":"1px solid #F00",
            "top":"30px",
            "left":"30px"
        }).show("fast");
    }).mouseout(function(){ // 当鼠标移出的时候
        $("#showPic").mouseover(function(){ // 当鼠标移入显示图片的时候执行的事件
            $(this).addClass("mOver")
        }).mouseout(function(){
            $("#showPic").remove();
        });
        setTimeout(function(){ // 延时200毫秒执行
            if($("#showPic").hasClass("mOver")){
                return;
            }else{
                $("#showPic").remove();
            }
        },200);
    });

 另外使用jq自定义的hover()方法也是可以实现mouseover/mouseout的效果