jquery关于鼠标移上去,显示一个动态层的问题

Question

求代码，类似与QQ空间|围脖 鼠标移上去就显示对应的动态层，几秒后就消失，层可点，那位大哥有代码或者有思路的跟小弟说说，感激不尽。。。

Answer 1

那我来抛砖引玉一下吧~ - -
<a href='javascript:;' id='H_link'>hover me</a>
<div id = 'H_div' style='display:none'>This is the hidden Div <span style='color:blue' onclick="javascript:alert('Ouch , it is hurt');">You can click me</span> </div>

<script>
$("#H_link").hover(
function(){
if($("#H_div").css("display")=="none"){
$("#H_div").fadeIn("slow");
setTimeout("$('#H_div').fadeOut()",5000);
}
});
</script>
-------
关于DIV的定位，悬浮~就得根据你的需要写CSS 啦~

追问

但是我的是 循环生成的一个个的层，当鼠标移到对应的层上去，数据是从数据库显示的，请问大侠该如何实现，求源码。++++++++++++++++++++++++++分

追答

嗯..既然是循环出来的~~给这些要hover的链接，加一个class可以吧~
这些div~定义一个ID可以吧~ 链接和DIV成对读出~可以吧？
那么。。
hover me
This is the hidden Div You can click me

hover me2
This is the hidden Div2 You can click me

$(".H_link").each(function(){
$(this).hover(
function(){
var thisDiv = $(this).next("div");
var DivId = thisDiv.attr("id");
if(thisDiv.css("display")=="none"){
thisDiv.fadeIn("slow");
var thisTo = setTimeout("$(\"#"+DivId+"\").hide()",5000);
}
});
})

--------------------------------------------------------------
当然，ajax来做更好~不过，我不晓得你是用什么语言来做哦。
--------------------------------------------------------------
或者呢。。ajax的话~
hover me

当鼠标上移的时候~把标签内的内容作为关键字，用ajax请求发送到服务端，然后处理~返回DIV的参数~然后append 这个DIV~
如:
$.post("处理页面",{keyword:获得的关键字},function(data){
var obj = eval(data);
var width = obj.width;
var height = obj.height;
var id = obj.id;
................
$(document.body).append(""); //或者某个图层里
var thisTo = setTimeout("$(\"#"+id+"\").hide()",5000);
})

追问

我的是php开发滴，楼上的能详细点么。

追答

额~嗯，我也是PHP~
我写个小例子吧~
base.php

index.html
hover me
hover me2
hover me3

$(".H_link").each(function(){
$(this).hover(function(){
var keywords = $(this).html();
$.post("base.php",{keywords:keywords},function(data){
var obj = eval(data);
if($("#"+obj.id)){ //已经存在DIV
if($("#"+obj.id).css("display")=="none"){
$("#"+obj.id).fadeIn("slow");
var thisTo = setTimeout("$(\"#"+obj.id+"\").hide()",5000);
}
}else{
$(document.body).append(""+obj.data+"");
var thisTo = setTimeout("$(\"#"+obj.id+"\").hide()",5000);
}
});
});
})

代码可能有错误哈，你看着改一下吧~反正大概就是这个意思。。
触发的链接统一定义一个class~然后hover的时候就传值到php处理~处理结果返回~就生成div~然后倒数5秒再隐藏掉。