CODEWITHSUNDEEP
jquery
ian
ian

Reputation: 12345

showing a element on mouseover and hiding it on mouseout

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?

Upvotes: 1

Views: 234

Answers (4)

Russ Cam
Russ Cam

Reputation: 125538

    $("#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.

Upvotes: 2

Vincent Ramdhanie
Vincent Ramdhanie

Reputation: 103155

You can use the hover function.

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

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

    });

Upvotes: 0

Artem Barger
Artem Barger

Reputation: 41232

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.

Upvotes: 2

Rasmus Kaj
Rasmus Kaj

Reputation: 4360

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

Upvotes: 0

Related Questions