将鼠标悬停在隐藏的元素上以显示它

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:

有没有办法将鼠标悬停在已隐藏的元素上。我试图模仿Steam在他们的主页上用箭头导航做什么。你会注意到，当你第一次到达页面时，没有箭头显示：

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?

我已经尝试设置包含箭头图像的div来显示：none并且还尝试了可见性：隐藏但似乎既不适用于jQuery中的悬停或鼠标悬停方法。我会想到可见性：隐藏会使它工作，但似乎并非如此。有没有其他方法我可以从一开始就隐藏这些div，但仍然可以让悬停事件对它们起作用？

6 个解决方案

#1

Set it to zero opacity instead:

将其设置为零不透明度：

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

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

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

#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的不透明技术的例子，它也适用于jQuery的悬停。

CSS:

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:

HTML：

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

jQuery:

jQuery的：

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

#3

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

使用.fadeTo jQuery方法在悬停状态下更改元素的不透明度。

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

jQuery站点包含一个示例，但是这样的东西就足够了

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

From the jQuery Hover page.

来自jQuery Hover页面。

#4

You could set it to opacity: 0.

您可以将其设置为不透明度：0。

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

为了使它跨浏览器，你可能想用jQuery来做。

#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.

一种方法是使用备用命中测试div，使其没有内容，但是当它悬停在它上面时显示“箭头”div。当退出“箭头”div（或命中测试div）时，将再次隐藏“箭头”div。

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.

或者，您可以使用相同的div作为命中测试和“箭头”，这样背景图像将用于div的视觉元素。悬停时，您可以指示将图像的偏移设置为显示“箭头”的位置。退出时，您可以将背景的偏移设置为不再显示箭头图像的位置。

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.

最后，如果内容始终与命中测试区域位于同一位置，则可以将div的不透明度设置为零，并相应地切换。

#6

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.

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