Question

<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不可见。这可能吗？

Answer 1

好的，对于你的情况，我会使用Javascript来执行此操作，因为你的约束是将数据转换为一个div。

首先我会尝试类似的事情：

<强> 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 Hover Doc

我只是使用属性“data-info”将文本拉出锚点并将其添加到您指定的div中。尽管如此，有很多不同的方法可以实现。

修改

此解决方案确实需要jQuery才能运行。它可以使用纯Javascript，但jQuery使您的代码更小，更容易实现。

Answer 2

是的，您可以使用Javascript执行此操作。如果您打算使用库，可以使用jQuery。可以在此处找到一个示例：http://api.jquery.com/hover/

$("a").hover(function(){
    $("#troll").fadeIn();
}, function(){
    $("#troll").fadeOut();
})

如何在按钮悬停时启动动画

2 个答案: