您的位置:博客首页 >> 程序源码 >> Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击

Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击

日志编号:199 发表时间: 2015-06-02 23:55:13 关注次数:2446
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击</title>
    <script src="jquery-1.11.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {//write by kuhanzhu
         
            $("dt a").mouseenter(function () {//mouseover  $(".aa").mouseenter
                $("#float_box").show();
            //  var ps = $(".aa").position(); //position和offset的区别
              var offset = $(this).offset(); 
              // $("#float_box").css({left: offset.left, top: offset.top+19}).show(); 
            $("#float_box").css("position", "absolute");
            $("#float_box").css("left", offset.left); //距离左边距
            $("#float_box").css("top", offset.top + 18); //距离上边距
            
 var $href = $(this).attr("href");//获取链接内容,以传递到ajax进一步操作
//var $href = $(this).attr("href").replace("/abbc/",""); //简单过滤href中字符,比如/post/343这种文章链接,就可以很简单的提取到文章id 343
//alert($href);//调试用,弹出来可以看到$href内容
 //$(this).attr("href",$href+"&kk=1");  //追加参数
//$("a").attr("href", function(){ return this.href + "&kk=1"; });

 $.get("do.php?action=dosomething&id="+$href,function(data){//jquery获取内容,没什么好说的,jquery基础。
 $("#job_show").html(data);//将ajax获取到的内容显示到id为job_show的html块中

            });
            $("#float_box").mouseleave(function () {//鼠标离开弹出层就消失弹出层
                $("#float_box").hide();
            });
        })
    </script>
   <style type="text/css">
#float_box{width:200px;height:200px;border:1px solid #f00;background:#999999;}
</style>
</head>
<body>

<div id="vlist" class="clearfix">
 <ul><dl><dt><a href="/2791" class="aa">小标题一</a></dt>
  <dd><a href="/h/23300">a</a></dd>
  </dl>
  <dl><dt><a href="/54" class="aa">小标题二</a></dt>
    <dd><a href="/h/5656">a</a></dd>
    <dd><a href="/h/12928">b</a></dd>
  </dl>

 </ul>
 
</div>
<div id="float_box" style="display:none;">
        <a href="#">弹出后的链接一</a>    
        <a href="#">弹出后的链接二</a>
        <a href="#">弹出后的链接三</a>
        <div id="job_show">这里显示ajax内容</div>
</div>
</body>
</html>
本站不提供讨论功能。
本站所有非新闻类文章均为原创,且禁止转载。
本站为了获得更多流量赚取广告费,难免会有以次充好的文章,望见谅,勿鄙视。