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");
});
Спасибо ... но как это сделать рядом с гиперссылкой – Hulk
@Hulk: вы можете изменить это от 'div' до' span', или вы можете добавить 'display: inline' к его стилю. – Sampson
Спасибо ... – Hulk