CODEWITHSUNDEEP
jquerycssmouseoverfadeinmouseout
Ariosa
Ariosa

Reputation: 45

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.

Upvotes: 0

Views: 232

Answers (1)

Blazemonger
Blazemonger

Reputation: 92893

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.

Upvotes: 2

Related Questions