Hover over a hidden element to show it

Question

Is there any way to hover over an element that's already hidden. I am trying to mimic what Steam does with their arrow navigation on their home page. You'll notice that when you first get to the page, there are no arrows showing:

Then when you hover over the area where there should be an arrow, it shows itself:

I've tried setting my divs that contain the arrow images to display: none and have also tried visibility: hidden but neither seems to work with the hover or mouseover methods in jQuery. I would have thought visibility: hidden would make it work, but that doesn't seem to be the case. Is there any other way I can hide these divs from the start but still be able to have hover events work on them?

Answer 1

Set it to zero opacity instead:

$('#blah').hover(function() {     $(this).fadeTo(1,1); },function() {     $(this).fadeTo(1,0); }); 

http://jsfiddle.net/mblase75/bzaax/