Пятница, 22 Июня 2012 10:34

Событие .hover() на jQuery

Written by 
Оцени эту запись
(10 Голоса)

Событие hover определяет некоторую активность при наведении курсора на элемент. Причем, можем задать определенную динамику при наведении мыши на элемент и при уходе курсора с него.

 

 

$('.elem').hover(function(){},function(){});

 

Первая функция описывает поведение элемента при наведении курсора на него, вторая - при покидании курсора

 

$('.elem').hover(function(){

$(this).text('mouse on');

},function(){

$(this).text('mouse off');

});

 

 

Пример:

 

$(document).ready(function(){
$('.tooltip').hover(function(){
$(this).append('<span class="tooltip_bg"><span class="tooltip_text">'+$(this).attr('title')+'</span><i class="tooltip_bg_bot"></i></span>');
var tip = $(this).attr('title');
$(this).attr('title','');
$(this).children('.tooltip_bg').css('top',-$(this).children('.tooltip_bg').height()-15).css('right',-$(this).children('.tooltip_bg').width());
},function(){
$(this).attr('title',$(this).children('.tooltip_bg').children('.tooltip_text').text());
$(this).children('.tooltip_bg').remove();
});
});

 

Здесь показано пример использования события hover() для создания Tooltip - красивой и информативной подсказки, которая появляется при наведении на элемент.

Подробно о создании Tooltip в статье Подсказка в виде Tooltips

 

Демо здесь

 

 

 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов