隱藏一個菜單，如果父母是在鼠標或菜單本身是鼠標

我創建了一個簡單的菜單，其中父元素是懸停時，菜單本身將出現。但是，我試圖做的是，當用戶的鼠標懸停在父元素或菜單本身之外時，它將消失。隱藏一個菜單，如果父母是在鼠標或菜單本身是鼠標

菜單

<div class="tab"> 
     <div id="shop" class="source tabFace"> 
      Shop 
     </div> 
     <div class="tabHidden"> 
      <?php 
       wpsc_start_category_query(array(‘category_group’=> 1, ‘show_thumbnails’=> 1)); 
      ?> 
      <div class="tabRow source"> 
       <a href="<?php wpsc_print_category_url();?>"> 
        <?php 
         wpsc_print_category_name(); 
        ?> 
       </a> 
      </div> 
      <?php 
       wpsc_end_category_query(); 
      ?> 
     </div> 
    </div>

的HTML結構在我的CSS，我有.tabHidden類display:hidden;

在我的jQuery的，當用戶將鼠標懸停在.tabFace類，就會有生命的和使隱藏的菜單可見

$(".tab").each(function(e){ 
    var parent = $(this); 

    $(this).children(".tabFace, .tabHidden").on("mouseover", function(){ 
     $(this).parent().children(".tabHidden").css("display","block"); 
     $(this).parent().children(".tabHidden").stop().animate({ 
      "opacity":"1", 
      "top":"0" 
     }); 
    }); 
});

我想弄清楚如何使用戶在盤點後淡出faceTab或tabHidden類。

來源

2014-06-15 Majo0od

只需使用['.hover（）']（http://api.jquery.com/hover/）事件處理程序：'$（「＃選擇」） .hover（function（）{}，function（）{}）'。第一個功能是當你'mouseover'的時候，第二個是你'mouseout'的時候。 – royhowie

我用你的代碼玩了一下，但因爲沒有CSS，所以沒有走得太遠。 Luxelin的精湛建議。我只想補充一點，如果你沒有在父母身上徘徊，孩子會消失，並且不允許你點擊孩子的任何東西。如果你將鼠標懸停在它上面，你將不得不提出更多的代碼來保持孩子可見。 – TimSPQR

如果將'tabHidden'嵌套爲'tabFace'的子元素，會簡單得多 – charlietfl

如何使用jQuery的鼠標，創建一個事件的類和逐漸淡化每個元素通過使用此事件函數內。

$('.tabHidden').mouseout(function(){ 
    $(this).fadeOut("slow", function() { 
    // Animation complete. 
    }); 
});

信息： http://api.jquery.com/mouseout/

來源

2014-06-15 03:59:58 silver

這是我解決這個問題的問題：當鼠標離開tabHidden時，它會消失。我希望如果鼠標在TabHidden或tabFace上，但不是單獨的，它應該是集體的，如果這是有道理的。 – Majo0od

隱藏一個菜單，如果父母是在鼠標或菜單本身是鼠標

回答

相關問題