1

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

3 に答える 3

1

jQueryのホバーメソッドは2つの関数入力を受け取ります。

$("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>
于 2010-02-03T06:29:59.967 に答える
0

hover()2つの引数を取ります。アクティブ化されたときのコールバックと非アクティブ化されたときのコールバックです。

$("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");
});
于 2010-02-03T06:29:44.147 に答える
0

ホバーは、パラメーターとして2つの関数を取り、オーバーとアウトを処理します。最初に表示し、2番目に非表示にする必要があります。その場合、そのクラスがインラインにしない限り、divはおそらくスパンである必要があります

于 2010-02-03T06:32:04.370 に答える