鼠标放上弹出一个详细内容框

Question

CSDN这个论坛上就是放在头像上弹出用户信息的框，是怎么实现的啊？我现在要实现这个效果。求助

Answer 1

一般的做法大致为以下原理：
应用onmouse over事件，调用JS函数加载一个DIV框（可以是body onload时加载好的，也可以是ajax动态加载的）

Answer 2

<img onmouseover="try{showUserCard(this,'fenyao')}catch(ex){};" alt="fenyao用户头像" title="fenyao用户自定义头像" src="http://avatar.profile.csdn.net/7/2/0/2_fenyao.jpg">function showUserCard(sender, username) {
if (!window.loaded) return; // 未加载
if (!currentUserCard) {
//if (!panelTopicAdmin) return;
currentUserCard = new CsdnUserCard(); //*/
}
var point = absolutePoint(sender);
currentUserCard.owner = sender;
currentUserCard.show(point.x + 65, point.y, username, sender.src);
currentUserCard.mouseover = function(e) {
var element = typeof event != "undefined" ? event.srcElement : e.target;
var hotCard = false;
while (element) {
hotCard = element == currentUserCard.owner || element == currentUserCard.div_card;
if (hotCard) break;
element = element.parentNode;
}
if (!hotCard) {
removeEventHandler(document, "mouseover", currentUserCard.mouseover);
currentUserCard.close();
}
}
addEventHandler(document, "mouseover", currentUserCard.mouseover);
}用jquery 应该很多这种插件的.

Answer 3

我写了一段JS，出来了div怎么就把图片给覆盖了

Answer 4

可以用jquery的mouseover/mouseout或者mouseenter/ mouseleave.
例子很多，google搜索一下：  jquery thumbnail hover zoom

Answer 5

设置下新的div的位置，（.style.position="";.style.top=;.style.left=;）