将鼠标悬停在一个隐藏的元素上以显示它 [英] Hover over a hidden element to show it

问题描述

有任何方法可以将鼠标悬停在已隐藏的元素上。我试图模仿什么Steam用他们的主页上的箭头导航。您会注意到，当您第一次访问该网页时，没有显示以下箭头：

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:

然后，当您将鼠标悬停在应该有箭头的区域时，会显示：

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

我已经尝试将包含箭头图像的div设置为 display：none ，并尝试了 visibility：hidden ，但似乎并不适用于jQuery中的悬停或mouseover方法。我会认为 visibility：hidden 会使它工作，但似乎不是这样。有没有其他方法我可以隐藏这些div从一开始，但仍然可以有悬停事件工作在他们？

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?

推荐答案

将其设置为零不透明度：

Set it to zero opacity instead:

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

http： //jsfiddle.net/mblase75/bzaax/

这篇关于将鼠标悬停在一个隐藏的元素上以显示它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！