当用户悬停在对象上时显示气球

Question

我正在设计一个博客主题。我正在尝试制作一个信息气球，当用户在作者的名字上盘旋时，它会出现，就像我们在名称上悬停时出现的Facebook气球一样，当光标离开名称或气球时，它会消失。

像这样的dl.dropboxusercontent.com/u/28793409/baloon.jpg

我尝试过一些Jquery，但总是有问题，因为我希望用户在气球上时不要隐藏。我知道我的jquery代码是个灾难:D

$(function() {          
var authorInfo = $('.author-info');

$('.author').hover(function() {
    $(this).find('.author-info').delay(700).fadeIn();
});


$('.author-info').mouseleave(function(){
    authorInfo.fadeOut();
});

$('.close').hover(function(){
    authorInfo.fadeOut();
});

$('.close').hover(function(){
    authorInfo.fadeOut();
});

$('#sereen').hover(function(e){
  e.stopPropagation();
});

authorInfo.hover(function(e){
e.stopPropagation();
});

});

这是我设计的https://dl.dropboxusercontent.com/u/28793409/Capture.JPG气球

这是页面http://bit.ly/1uKDY3V，请悬停在文章作者的名字上。我做了HTML和CSS部分，但我不擅长Jquery和JS，所以请帮助我完成它。

Answer 1

嘿，你可以检查一下系绳下降插件，它为您提供了免费的碰撞检测，并有一个例子，看起来几乎与您的形象。

http://github.hubspot.com/drop/docs/welcome/