I am designing a blog theme. I am trying to make an info balloon that will appear when user hovers on author's name, similar to Facebook balloons when we hover on names a balloon appear and when the cursor leave name or balloon it fades Out.
like this
dl.dropboxusercontent.com/u/28793409/baloon.jpg
I've tried some Jquery but always had problem because I want that when user is on balloon that not be hidden. i know my jquery code is a disaster :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();
});
});
and this is the balloon i designed
https://dl.dropboxusercontent.com/u/28793409/Capture.JPG
its the page http://bit.ly/1uKDY3V , please hover on author name on posts. i did the HTML and CSS part but i am not good at Jquery and JS so please help me to make it.
