CODEWITHSUNDEEP
javascriptjquerycssevents
Aaron
Aaron

Reputation: 10848

Hover over a hidden element to show it

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:

enter image description here

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

enter image description here

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?

Upvotes: 24

Views: 25710

Answers (6)

Adam
Adam

Reputation: 44929

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();
});

Upvotes: 12

msarchet
msarchet

Reputation: 15242

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.

Upvotes: 6

dgvid
dgvid

Reputation: 26633

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.

Upvotes: 0

Blazemonger
Blazemonger

Reputation: 92893

Set it to zero opacity instead:

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

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

Upvotes: 37

cwharris
cwharris

Reputation: 18125

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.

Upvotes: 1

Filip
Filip

Reputation: 2522

You could set it to opacity: 0.

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

Upvotes: 4

Related Questions