html - 如何使动画在按钮悬停时开始

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 悬停文档

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

编辑

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

Answer 2

是的，你可以用 Javascript 做到这一点。如果要使用库，可以使用 jQuery。一个例子可以在这里找到：http: //api.jquery.com/hover/

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