2010-02-03 3 views
1

Как изменить следующий код, так что при возникновении события onmouseover в правой части гиперссылки появляется div.Функция зависания jQuery

<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 

<script> 
$(document).ready(function(){ 
$('a.moreDetails').hover(function() { 
$(this).next().toggle('fast'); 
}); 
}); 

</script> 

<body> 
<a href="#" class="moreDetails">(details)</a> 
<div class="details">User 1</div> 
</body> 
</html> 

ответ

1

метод парения JQuery принимает два функциональных входа:

$("a.moreDetails").hover(
    function(){ 
    $(this).next().show('fast'); 
    }, 
    function(){ 
    $(this).next().hide('fast'); 
    } 
); 

You также, кажется, не хватает вашего закрывающего тега </head>. Чтобы ваш элемент появился рядом с вашей ссылкой, потребуются некоторые изменения разметки, манипуляции с javascript или некоторые правила CSS. Вы можете внести незначительные изменения:

<a href="#" class="moreDetails">(details)</a> 
<span class="details">User 1</span> 
+0

Спасибо ... но как это сделать рядом с гиперссылкой – Hulk

+0

@Hulk: вы можете изменить это от 'div' до' span', или вы можете добавить 'display: inline' к его стилю. – Sampson

+0

Спасибо ... – Hulk

0

hover() принимает два аргумента: функцию обратного вызова для того, когда он активен, а другой, когда его деактивирована так:

$("a.moreDetails").hover(function() { 
    $(this).next("div.details").stop().show("fast"); 
}, function() { 
    $(this).next("div.details").stop().show("slow"); 
}); 

Вы заметите, что я звоню stop(). Это хорошая привычка вовлекаться в использование анимаций, иначе вы можете получить непреднамеренные визуальные артефакты из анимации очередей.

Редактировать: Появляется рядом с элементом, имеет некоторые трудности. Вы можете изменить CSS:

div.details { display: inline; } 

и он появится рядом со ссылкой, но тогда эффект Jquery не будет действительно работать правильно, потому что они, как правило, чтобы установить вещи display: block. Если вы не хотите или нуждаетесь эффект, который вы можете просто использовать класс:

div.details { display: inline; } 
div.hidden { display: none; } 

, а затем:

$("a.moreDetails").hover(function() { 
    $(this).next("div.details").addClass("hidden"); 
}, function() { 
    $(this).next("div.details").removeClass("hidden"); 
}); 
+0

Спасибо ... но как сделать его рядом с гиперссылкой, а не ниже – Hulk

+0

@Hulk: см. мое обновление. – cletus

+0

Спасибо .......................... – Hulk

0

hover выполняет 2 функции в качестве параметров для обработки и выключения. вы должны показать в первом и скрыть во втором. то ваш div, если только его класс не делает его встроенным, должен, вероятно, быть диапазоном

Смежные вопросы