Html 如何使动画在按钮悬停时开始 Info

我想做这样的事情，如果我将鼠标悬停在XYZ1上，XYZ1的信息将显示在div#troll中，对于XYZ2，XYZ2等。但是当用户unhover a=href时，我希望div不可见。这可能吗？

是的，您可以使用Javascript实现这一点。如果要使用库，可以使用jQuery。可以在此处找到一个示例：

---

好的，在这种情况下，我会使用Javascript来实现这一点，因为您的约束条件是将数据放入一个div中

首先，我会尝试以下方法：

HTML

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

我只是使用属性“data info”从锚中拉出文本并将其添加到指定的div中。但是，有许多不同的方法可以实现这一点

编辑

---

这个解决方案确实需要工作。使用纯Javascript是可能的，但是jQuery使您的代码更小，更易于实现。

这不是我想要的。如果我在你的演示中悬停“芯片”或“袜子”，它们就会消失，然后再回来。我需要外部元素才能生效。哦，对不起。我上错了演示区。这正是我想要的。非常感谢。客户端Javascript更改会受到PHP/Apache服务器XAMPP的影响，这似乎有点奇怪。如果你能得到更多关于原因的详细信息，我可能会进一步研究。我不确定它是否是XAMPP，它在我的电脑上根本不起作用。它是在你使用的特定浏览器中发生的吗？我的回答中没有直接提到一个想法（我会更新），但它确实需要工作。看起来任何jQuery版本都会像

一样。hover

自1.0版以来一直在jQuery中。我在.js中包含了jquery，但我需要使用的真正文件是.min.js（至少是我下载的那个）。非常感谢。我已经测试过了，效果很好。没问题，只要确保答案正确就行了。谢谢

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

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

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