jquery懸停顯示/隱藏問題

我試圖設置，以便當你懸停在類.object1 - >反過來應該揭示.obj_1，當你沒有徘徊它，它應該隱藏.obj_1。我的代碼可能有點小，謝謝你的幫助！jquery懸停顯示/隱藏問題

$(document).ready(function() { 
    $(".obj_1 , .obj_2").hide(); 
     }); 
     $(".object1").hover(
     function() { $(".obj_1").show(); }, 
     function() { $(".obj_2").hide(); } 
    ); 
     $(".object2").hover(
     function() { $(".obj_2").show(); }, 
     function() { $(".obj_1").hide(); } 
    );

來源

2012-08-07 Cam

很簡單，它應該是

$(document).ready(function() { 
    $(".obj_1 , .obj_2").hide(); 
     }); 
     $(".object1").hover(
     function() { $(".obj_1").show(); }, 
     function() { $(".obj_1").hide(); } 
    ); 
     $(".object2").hover(
     function() { $(".obj_2").show(); }, 
     function() { $(".obj_2").hide(); } 
    );

的「懸停」處理函數簽名（mouseInHandler，向mouseOutHandler）。對於object1，您希望在mouseIn上顯示obj_1，並將其隱藏在mouseOut上。您不需要在object1懸停處理程序上引用obj_2。

退房撥弄我做here

僅供參考 - 懸停事件行事怪異，當你有複雜的內部內容。（例如，另一個div內的div等）。我建議你使用"mouseenter"和"mouseleave"

更新應答後實現這一一個下拉菜單問題

下拉在CSS菜單是一個很好的例子，其中「懸停」是不夠的 - >因爲子菜單消失，一旦你不在鏈接了..這不是我們想要的。（？應該）

它們可以用純CSS
取得的HTML結構是很重要的：

它需要注意的下拉菜單3樣東西是很重要的。

例如，請考慮以下的結構，而不是：

<ul class="menu"> 
    <li> 
    </li> 
    <li> 
     <ul class="menu"> 
     <li> 
     </li> 
     </ul> 
    </li> 
</ul>

這種結構是遞歸的 - 你可以有子菜單的無限水平 - 對「禮」和的mouseenter /鼠標離開會因爲子菜單舉行是「李」項目的一部分。

要看到這個動作在my fiddle看看

還請注意，我刪除從onload事件代碼的第一個「隱藏」，並用CSS取代它「顯示：無」 - 它解決了頁面上閃爍負載（閃爍方式 - 第一子菜單顯示，而且一旦頁面加載，我們將其隱藏。）

一個CSS的解決方案將包括與它「盤旋」（是的，懸停..）

您選擇在google中搜索時可以找到大量有關它的博客文章。

Here is the first one I found.

來源

2012-08-07 15:32:02

所以，如果我的實際情況=隱藏之前有一個div的UI LI或顯示您的建議使用的mouseenter和鼠標離開？導致你的位置，它不工作，除非它是一個簡單的層次結構。我可以補充說，以前的課程？ – Cam 2012-08-07 16:18:22

檢查此，這是我的導航如何顯示..完全它在這裏工作，但不是在我的網站...這是令人沮喪的..http：//jsfiddle.net/cornelas/C94Tq/1/ – Cam 2012-08-07 16:20:23

這是在我的頭btw – Cam 2012-08-07 16:21:22

jquery懸停顯示/隱藏問題

回答

相關問題