Posted By

teedy on 10/18/09

Tagged

javascript
jquery
web
design

Versions (?)

Last Edited at 10/18/09 07:02am

Statistics

Viewed 616 times

Favorited by 0 user(s)

Related snippets

Cirrostratus Hover

/ Published in: jQuery

A simple jQuery-powered hover based on the element's title

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

$(function() {
 
	$('.cirroHover').each(function(){
		var txt = $(this).attr('title');
		$(this).append('<em class="" style="position:absolute;background:#000;color:#fff">'+txt+'</em>');
		$(this).find('em').hide();
	});
 
	$('.cirroHover').hover(function(){
		var x = $(this).offset().left;	
		var y = $(this).offset().top;
		$(this).find('em').css({top: ((y*1)+12)+'px', left: x+'px'}).show('fast');
		return false;
	});
	$('.cirroHover').mouseleave(function(){
		$(this).find('em').hide('fast');
	});
});