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/

Answer 2

You cannot hover over an invisible element or an undisplayed element. You can hover over a visible element and then use that to show a different previously hidden element. Or you can hover over a transparent element and make it opaque.

Here is an example of the opacity technique using just CSS, it would also work with jQuery's hover.

CSS:

#it {
    opacity: 0;
    width: 500px;
    height:500px;
}

#it:hover {
    opacity: 1;
}

Here is an example of showing one element when another is hovered over:

HTML:

<div id="me">Hover over me to display something else</div>
<div id="else">Something else</div>

jQuery:

$("#me").hover(function(){
   $("#else").show();
},function(){
   $("#else").hide();
});

Answer 3

Use the .fadeTo jQuery method to change the opacity of the element on hover state.

The jQuery site contains an example but something like this should suffice

$("element").hover(//On Hover Callback
                   function() {$(this).fadeOut(100);} ,
                   //Off Hover Callback 
                   function() {$(this).fadeIn(500);})

From the jQuery Hover page.

Answer 4

You could set it to opacity: 0 .

In order to make it cross-browser you probably would like to do it with jQuery tho.

Answer 5

One way to do this is by using an alternate hit-test div, such that it has no content, but when hovered over it shows the "arrow" div. When the "arrow" div (or the hit-test div) is exited, then the "arrow" div would be hidden once again.

Alternatively, you could use the same div for the hit-test and the "arrow", such that a background image is used for the visual elements of the div. When hovered, you could instruct the image's offset to be set to a position which would show the "arrow". When exited, you would set the offset of the background to a position where the arrow image would not longer be shown.

And, finally, if the content will always be in the same position as the hit-test area, you could set the opacity of the div to zero, and toggle accordingly.

Answer 6

您可以将元素的不透明度设置为0.这将允许它们接收悬停事件（实际上是mouseenter和mouseleave），但实际上，要使它们对用户不可见。