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


Hover over a hidden element to show it

是否有任何方法可以将鼠标悬停在已经隐藏的元素上。我试图模仿Steam在其主页上使用箭头导航的作用。您会注意到，当您第一次进入页面时，没有箭头显示：

enter

相关讨论

将其设置为零不透明度：

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

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

相关讨论

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

这里是仅使用CSS的不透明度技术的示例，它也可以与jQuery的悬停一起使用。

CSS：

1
2
3
4
5
6
7
8
9
#it {
    opacity: 0;
    width: 500px;
    height:500px;
}

#it:hover {
    opacity: 1;
}

下面是显示一个元素悬停在另一个元素上的示例：

HTML：

1
2
Hover over me to display something else
Something else

jQuery：

1
2
3
4
5
$("#me").hover(function(){
   $("#else").show();
},function(){
   $("#else").hide();
});
相关讨论

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

jQuery站点包含一个示例，但是这样的例子就足够了

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

在jQuery Hover页面上。

相关讨论

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

为了使其跨浏览器，您可能希望使用jQuery jQuery。

相关讨论

执行此操作的一种方法是使用备用命中测试div，使其没有内容，但是将鼠标悬停在它上面时会显示"箭头" div。当退出"箭头" div(或命中测试div)时，"箭头" div将再次被隐藏。

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

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

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