Javascript 将鼠标悬停在隐藏元素上以显示它
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8595311/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hover over a hidden element to show it
提问by Aaron
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: noneand have also tried visibility: hiddenbut neither seems to work with the hover or mouseover methods in jQuery. I would have thought visibility: hiddenwould 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 设置为display: none并且也尝试过，visibility: hidden但似乎都不适用于 jQuery 中的悬停或鼠标悬停方法。我本以为visibility: hidden会让它起作用，但事实并非如此。有没有其他方法可以从一开始就隐藏这些 div，但仍然可以让悬停事件对它们起作用？
回答by Blazemonger
Set it to zero opacity instead:
将其设置为零不透明度：
$('#blah').hover(function() {
$(this).fadeTo(1,1);
},function() {
$(this).fadeTo(1,0);
});
回答by Adam
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();
});
回答by msarchet
Use the .fadeTojQuery method to change the opacity of the element on hover state.
使用.fadeTojQuery 方法更改悬停状态元素的不透明度。
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 Hoverpage.
来自jQuery 悬停页面。
回答by Filip
You could set it to opacity: 0.
您可以将其设置为opacity: 0.
In order to make it cross-browser you probably would like to do it with jQuery tho.
为了使其跨浏览器，您可能希望使用 jQuery 来完成它。
回答by cwharris
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（或hit-test 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 的不透明度设置为零，并相应地进行切换。
回答by dgvid
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），但实际上，使它们对用户不可见。
