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

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

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

Here is an example of the opacity technique using just CSS, it would also work with jQuery's hover.

<强> 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：

<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

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

jQuery网站包含一个示例，但是这样的内容应该足够了

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

从jQuery Hover页面。

Answer 4

您可以将其设置为opacity: 0。

为了使它跨浏览器你可能想用jQuery来做。

Answer 5

执行此操作的一种方法是使用备用命中测试div，使其没有内容，但当悬停在其上时显示“箭头”div。当退出“箭头”div（或命中测试div）时，“arrow”div将再次被隐藏。

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

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

Answer 6

您可以将元素的不透明度设置为0.这将允许它们接收悬停事件（实际上是mouseenter和mouseleave），但实际上，要让它们对用户不可见。