使用JQuery或css3懸停導航

我有一個導航欄，顯示懸停的內容。你可以在這裏看到一個工作演示：http://codepen.io/anon/pen/wjciG 使用JQuery或css3懸停導航

正如你所看到的，它工作得很好，但它有點錯誤。

我jQuery是簡單和絕對可以改進：

$("#navButtons li").hover(function(){ 
    $(this).find("span#tooltip").stop().fadeIn(300); 
}, function(){ 
    $(this).find("span#tooltip").stop().fadeOut(300); 
});

的span#tooltip絕對是放在下面的懸停能夠鏈接，所以當用戶將鼠標懸停在鏈接上，然後嘗試將鼠標懸停在工具提示/盒子閃爍（因爲有一個時刻，用戶沒有在任何東西上盤旋）。我需要允許用戶將鼠標懸停在某個元素上，然後將該框淡入，然後讓用戶將鼠標懸停在該框上，然後單擊可能位於其中的任何鏈接或內容。

是否有更好的方式使用Jquery或CSS3編寫此代碼以獲得更平滑，更可靠的結果？

來源

2013-01-10 JCHASE11

一個解決方法是添加一個絕對定位的div與透明背景填充該空間，所以用戶從來沒有真正懸停的列表項目...但這是骯髒的。其他想法？ – JCHASE11

做**不**，從不，不再使用多個ID的每頁！將'＃tooltip'改成一個類！ –

** + 1 **優秀的問題！ – arttronics

玩弄工具提示的CSS。將padding-top:20px; margin-top:-20px添加到span#tooltip使得筆尖的位置與圖標一樣高;因此，沒有辦法「拖出」這些鏈接。而且由於圖標比工具提示的z高，因此從圖標移動到圖標沒有任何不良影響。

enter image description here

（輪廓添加用於說明的目的）

來源

2013-01-10 20:48:15 Dawson

並將'id =「tooltip」'更改爲'class =「tooltip」' – Dawson

一種可能的替代方法是隻使用CSS實現淡入和淡出效果。

我把一個快速和骯髒的例子here放在一起，以顯示如何做到這一點。有些顯而易見的警告並不是所有的瀏覽器都支持它，但在當前示例中禁用JavaScript的用戶也是如此。 CSS版本仍然可以工作，它只會顯示並消失而不褪色。

也只是隱藏不透明的元素將使他們更容易訪問友好。

只是另一種選擇:)

來源

2013-01-10 20:58:31 gotohales

奇怪的是，我遇到了一個通過項目相同的問題。解決方法是在使用javascript的setTimeout方法隱藏工具提示之前添加延遲。

下面是代碼：

var closeTip = new Array(); 
$("#navButtons li").each(function (i) { 
    var $this = $(this); 
    $this.hover(function() { 
    clearTimeout(closeTip[i]); // cancell closing tooltip 
    if ($this.hasClass('visible')) { 
     return false; // we are still on, do nothing else 
    } else { 
     // we moved to another "li" element so reset everything 
     $("#navButtons li").removeClass('visible'); 
     $("span.tooltip").hide(); 
    } 
    // show "this" tooltip and add class "visible" as flag 
    $this.addClass('visible').find("span.tooltip").stop().fadeIn(300).mouseenter(function() { 
     clearTimeout(closeTip[i]); // cancell closing itself even if we leave 
    }); 
    }, 
    function() { 
    // delay closing tooltip unless is cancelled by another mouseenter event 
    closeTip[i] = setTimeout(function() { 
     $this.removeClass('visible').find("span.tooltip").stop(true, true).fadeOut(); 
    }, 500); 
    }); 
}); // each

既然你不應該在同一個文檔中使用相同的ID，我全部轉換成id="tooltip"class="tooltip"。

也是我增加了class="visible"到懸停的元素，相同的CSS屬性設置爲選擇

#navButtons li.hours:hover span, #navButtons li.hours.visible span { 
    background-position: -1px -35px; 
} 
#navButtons li.login:hover span, #navButtons li.login.visible span { 
    background-position: -41px -35px; 
} 
#navButtons li.newsletter:hover span, #navButtons li.newsletter.visible span { 
    background-position: -83px -35px; 
}

在腳本中發現...這樣的按鈕不會閃爍或者當我們移動從他們進入工具提示。

見JSFIDDLE

來源

2013-01-10 22:03:16 JFK

jsFiddle DEMO

你忘只是一個單一的屬性添加到您的#navButtons li span CSS選擇器。

margin-bottom: 25px; /* 20px is the tooltip distance, but a little extra helps */

之所以這工作是因爲margin-bottom是「框模式」爲其hover事件可以監控任何狀態變化的一部分。同時改變你的工具提示id所以有類名而不是，因爲你不能在網頁上有兩次相同的id。

來源

2013-01-11 06:39:02 arttronics

使用JQuery或css3懸停導航

回答

相關問題