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

Question

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

然后,当您将鼠标悬停在应该有箭头的区域时,它会显示自己:

我已经尝试将包含箭头图像的div设置为display: none并尝试过,visibility: hidden但似乎都没有使用jQuery中的悬停或鼠标悬停方法.我本以为visibility: hidden会让它发挥作用,但事实似乎并非如此.有没有其他方法我可以从一开始隐藏这些div,但仍然可以让悬停事件对它们起作用？

Answer 1

将其设置为零不透明度:

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

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

Answer 2

您不能将鼠标悬停在不可见元素或未显示元素上.您可以将鼠标悬停在可见元素上,然后使用它来显示不同的先前隐藏元素.或者您可以将鼠标悬停在透明元素上并使其不透明.

这是一个使用CSS的不透明技术的例子,它也适用于jQuery的悬停.

CSS:

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

#it:hover {
    opacity: 1;
}

这是一个显示另一个元素悬停在上面的元素的示例:

HTML:

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

jQuery的:

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

Answer 3

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

jQuery站点包含一个示例,但这样的东西应该足够了

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

来自jQuery Hover页面.