Question

I have this small script that shows a caption for a img when it is moused over.

    $("#v1").mouseover(function() 
    {
        $("#vc1").fadeIn("slow");
    });

How can I expand on this so that the caption #vc1 fades back out when the icon #v1 is not moused over?

Answer 1

    $("#v1")
      .mouseover(function() {
        $("#vc1").fadeIn("slow"); 
      })
      .mouseout(function() {
        $("#vc1").fadeOut("slow");
      });

Might consider using hover, which is essentially mouseenter and mouseleave

    $("#v1")
      .hover(
          function() {
              $("#vc1").fadeIn("slow"); 
          },
          function() {
              $("#vc1").fadeOut("slow");
      });

The difference is that mouseover and mouseout will fire when you move into a child element of the element to which the event handler is attached, whereas mouseenter and mouseleave a.k.a. hover won’t. This may not be a problem if the element to which you’re attaching doesn’t have children.