How to make animation start on button hover

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>

I want to do such thing, that if I hover mouse on XYZ1, info for XYZ1 will show up in div#troll, for XYZ2, XYZ2 etc. but when user unhovers a=href, I want div to be invisible. Is that possible?

Answer 1

Ok, for you situation I would use Javascript to do this as your constraint is getting the data into that one div.

First I would try something like:

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

I am just using the attribute "data-info" to pull text out of the anchor and add it to the div you specified. There are many different ways this could be achieved though.

EDIT

This solution does require jQuery to work. It is possible with pure Javascript however jQuery makes your code a lot smaller and easier to implement.

Answer 2

Yes you can do this with Javascript. If you are going to use a Library you can use jQuery. An example can be found here: http://api.jquery.com/hover/

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