функция наведения - PullRequest
Новая
       1

функция наведения

1 голос
/ 03 февраля 2010

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

<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>

Ответы [ 3 ]

1 голос
/ 03 февраля 2010

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

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

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

<a href="#" class="moreDetails">(details)</a>
<span class="details">User 1</span>
0 голосов
/ 03 февраля 2010

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

0 голосов
/ 03 февраля 2010

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");
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...