0 
<div id="troll">Info</div>
<a href=xyz1.php">XYZ1</a>
<a href=xyz2.php">XYZ2</a>
<a href=xyz3.php">XYZ3</a>
<a href=xyz4.php">XYZ4</a>

XYZ1 にマウスを合わせると、XYZ1 の情報が div#troll に表示され、XYZ2、XYZ2 などの情報が表示されるようにしたいのですが、ユーザーが a=href のホバーを外すと、div が非表示になるようにします。それは可能ですか？

4

2 に答える 2

1

OK、あなたの状況では、制約がその1つのdivにデータを取得しているため、Javascriptを使用してこれを行います。

まず、次のようなことを試します。

HTML

<div id="troll">Info</div>
<a class="infoLink" href="xyz1.php" data-info="Info On XYZ1">XYZ1</a>
<a class="infoLink" href="xyz2.php" data-info="Info On XYZ2">XYZ2</a>
<a class="infoLink" href="xyz3.php" data-info="Info On XYZ3">XYZ3</a>
<a class="infoLink" href="xyz4.php" data-info="Info On XYZ4">XYZ4</a>

Javascript

$('.infoLink').hover(
  function()
  {
      $('#troll').html($(this).attr('data-info'));
  },
  function()
  {
      $('#troll').empty();
  }
);

JSFiddle

jQuery ホバー ドキュメント

属性「data-info」を使用してアンカーからテキストを引き出し、指定したdivに追加しています。ただし、これを達成する方法はたくさんあります。

編集

このソリューションでは、 jQueryが機能する必要があります。純粋な Javascript でも可能ですが、jQuery を使用するとコードが大幅に小さくなり、実装が容易になります。

于 2013-04-27T09:13:06.917 に答える