24

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?

Aaron
  • 10,386
  • 13
  • 37
  • 53

6 Answers6

37

Set it to zero opacity instead:

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

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

Blazemonger
  • 90,923
  • 26
  • 142
  • 180
  • 1
    Brilliant solution. I had this element that I completely hidden and my hover event won't respond because it can't see the element. But with opacity set to zero, the element is just there waiting to be triggered. – kriscondev Jul 26 '18 at 12:55
12

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();
});
Adam
  • 43,763
  • 16
  • 104
  • 144
  • opacity values higher than 1 are "clamped" to 1 https://developer.mozilla.org/en/CSS/opacity – PM5544 Dec 21 '11 at 19:52
6

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.

msarchet
  • 15,104
  • 2
  • 43
  • 66
  • the .fadeTo() method worked great along with setting the opacity to 0 initially. The .fadeOut() and .fadeIn() methods did not work though... – Aaron Dec 21 '11 at 19:57
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.

Filip
  • 2,514
  • 17
  • 28
  • 2
    If you don't use jQuery, also include in the css style filter:alpha(opacity=0); for ie8 and older. – Davos555 Dec 21 '11 at 19:41
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.

cwharris
  • 17,835
  • 4
  • 44
  • 64
0

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.

dgvid
  • 26,293
  • 5
  • 40
  • 57