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

问题描述

有没有办法将鼠标悬停在已经隐藏的元素上。我试图模仿Steam在主页上的箭头导航。您会注意到，当您第一次访问该页面时，没有箭头显示：

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

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

解决方案

将其设置为零不透明度：

  $（'＃blah'）。hover（function（）{
 $ （this）.fadeTo（1,1）; 
}，function（）{
 $（this）.fadeTo（1,0）; 
}）; 
  

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

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:

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屋！