將鼠標懸停在隱藏的元素上以顯示它

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

使用.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 tho做。

Answer 5

一種方法是使用備用命中測試div，使其沒有內容，但是當它懸停在它上面時顯示“箭頭”div。 當退出“箭頭”div（或命中測試div）時，將再次隱藏“箭頭”div。

或者，您可以使用相同的div進行命中測試和“箭頭”，這樣背景圖像就可以用於div的視覺元素。 懸停時，您可以指示將圖像的偏移設置為顯示“箭頭”的位置。 退出時，您可以將背景的偏移設置為不再顯示箭頭圖像的位置。

最后，如果內容始終與命中測試區域位於同一位置，則可以將div的不透明度設置為零，並相應地切換。

Answer 6

您可以將元素的不透明度設置為0.這將允許它們接收懸停事件（實際上是mouseenter和mouseleave），但實際上，要使它們對用戶不可見。