jQuery鼠标划过浮动层

来源：互联网发布：淘宝商品怎么编辑编辑：程序博客网时间：2024/04/30 15:12
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><style>body{font:12px/1.5 Tahoma;}body,ul,li,p,dl,dt,dd{margin:0;padding:0;}ul li{list-style:none;}img{border:none;vertical-align:middle;}a{text-decoration:none;color:#333;}.content{width:200px;padding:20px;position:relative;top:60px;left:80px}.content li{line-height:32px;border-bottom:1px dashed #ddd;position:relative;}.content a{width:180px;display:inline-block;}.preview{width:312px;height:106px;background:url(images/tipbox.png) no-repeat;padding:40px 0 0 30px;position:absolute;z-index:99;/*top:20px;left:60px;*/ background:#0000FF;}</style></head><body><div class="content">    <ul>        <li>            <a href="#@" class="ashow">文字1</a>        </li>        <li>            <a href="#@" class="ashow">文字2</a>        </li>        <li>            <a href="#@" class="ashow">文字3</a>        </li>        <li>            <a href="#@" class="ashow">文字4</a>        </li>    </ul></div><script>$(document).ready(function(){    var x = 30;    var y = 10;    $("a.ashow").hover(function(e){        $("body").append("<div class='preview'>我是提示文字.</div>");            $(".preview").css({"top":(e.pageY + y) + "px","left":(e.pageX - x) + "px"}).fadeIn("slow");    }),    function(){        $(".preview").fadeOut("fast");    }    $("a.ashow").mousemove(function(e){        $(".preview").css({"top":(e.pageY + y) + "px","left":(e.pageX - x) + "px"});    })}).mouseout(function(){        $(".preview").hide().remove()        });</script></body></html>