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

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

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

我尝试过将包含箭头图像的div设置为

display:none

，也尝试过

visibility:hidden

，但这两种方法似乎都不适用于jQuery中的hover或mouseover方法。我本以为

可见性：隐藏
可以让它工作，但事实似乎并非如此。有没有其他方法可以从一开始就隐藏这些div，但仍然可以让悬停事件在其上工作？
使用jQuery方法更改悬停状态下元素的不透明度

jQuery站点包含一个示例，但类似这样的内容就足够了

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

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

为了实现跨浏览器，您可能希望使用jQuery-tho
 一种方法是使用备用的命中测试div，这样它就没有内容了，但是当鼠标悬停在它上面时，会显示“arrow”div。当“arrow”div（或命中测试div）退出时，“arrow”div将再次隐藏

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

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

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

您可以将元素的不透明度设置为0。这将允许它们接收悬停事件（实际上是mouseenter和mouseleave），但实际上，它们对用户不可见。
您不能将悬停在不可见元素或未显示的元素上。可以将鼠标悬停在可见元素上，然后使用该元素显示以前隐藏的其他元素。也可以将鼠标悬停在透明元素上，使其不透明


CSS:

#it {
    opacity: 0;
    width: 500px;
    height:500px;
}

#it:hover {
    opacity: 1;
}

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

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


HTML:

#it {
    opacity: 0;
    width: 500px;
    height:500px;
}

#it:hover {
    opacity: 1;
}

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

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

我不认为悬停事件在隐藏的元素上。在steam站点上，不透明度：0被使用如果你不使用jQuery，也包括在css样式的过滤器中：alpha（不透明度=0）；对于ie8和更早版本的.opacity值大于1时，“钳制”为1，.fadeTo（）方法在最初将不透明度设置为0时效果非常好。虽然.fadeOut（）和.fadeIn（）方法不起作用，但…这是一个绝妙的解决方案。我完全隐藏了这个元素，我的悬停事件不会响应，因为它看不到该元素。但是当不透明度设置为零时，元素就在那里等待被触发。