用户将鼠标悬停在对象上时显示气球

时间:2014-09-18 14:35:00

标签: jquery css balloon

我正在设计博客主题。我正在尝试制作一个信息气球,当用户将鼠标悬停在作者的名字上时会出现,类似于Facebook气球,当我们将鼠标悬停在名称上时,气球会出现,当光标离开名称或气球时,它会淡出。


像这样 dl.dropboxusercontent.com/u/287​​93409/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,所以请帮助我做到。

1 个答案:

答案 0 :(得分:0)

嘿,你可以看看系绳下拉插件免费提供碰撞检测,并有一个看起来几乎像你的图像的例子。

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