Search code examples
jquerycssmouseoverfadeinmouseout

trying to mouseover on a div to activate fadein of another div

I was trying to have a specific div fade in (left_panel_fade), and stay visible as long as the mouse is over the div called left_panel.

When I use this code, nothing happens when I mouseover the left_panel:

      $("#left_panel").mouseover(function() {$("#left_panel_hover").fadeIn("slow");});
      $("#left_panel").mouseout(function() {$("#left_panel_hover").fadeOut("slow");});

This code worked for me, but does not fade:

$("#left_panel").mouseover(function(){$("#left_panel_hover").css('visibility','visible'); });
$("#left_panel").mouseout(function() {$("#left_panel_hover").css('visibility','hidden'); });

why doesn't my first code work? am I using the fadeIn/fadeOut correctly? i have tried changing mouseover and mouseout to mouseenter and mouseleave, with no results.

Solution

  • You need to hide left_panel_hover initially by using display: none instead of visibility: hidden.

    Notice that this fiddle works fine, but this fiddle does nothing -- the only difference is how left_panel_hover is hidden in the CSS.