Question

我创建了一个简单的菜单，当父元素悬停时，菜单本身就会出现。但是，我试图做的是当用户的鼠标悬停在父元素或菜单本身之外时，它将消失。

菜单的HTML结构

   <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>

在我的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类之后使其淡出。

Answer 1

如何使用jquery mouseout，为类创建一个事件，并在事件函数中使用this来逐个淡化每个元素。

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

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

如果父项是鼠标输出或菜单本身是鼠标输出，则隐藏菜单

1 个答案: