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>
<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>
本站不提供讨论功能。
本站所有非新闻类文章均为原创，且禁止转载。
本站为了获得更多流量赚取广告费，难免会有以次充好的文章，望见谅，勿鄙视。
本站所有非新闻类文章均为原创，且禁止转载。
本站为了获得更多流量赚取广告费，难免会有以次充好的文章，望见谅，勿鄙视。
