showing a element on mouseover and hiding it on mouseout

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.

Answer 2

You can use mouseout together with mouseover (or use mouseenter and mouseleave instead, depending on what behaviour you want when the mouse is in a child of #v1).

Answer 3

This should do the work:

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

And htt://api.jquery.com is nice resource which can help a lot in the future.

Answer 4

You can use the hover function.

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

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

    });