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 wh

Answer 1

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 2

You could set the opacity of the elements to 0. That would allow them to receive the hover events (actually mouseenter and mouseleave), but as a practical matter, make them invisible to users.

Answer 3

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 4

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 5

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 6

Set it to zero opacity instead:

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

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