Question

我试图将.toggle改为.hover和.mouseover而没有运气。

(".th_slidingDiv").hide();
$(".th_show_hide").show();

$('.th_show_hide').toggle(function(){
    $(".th_slidingDiv").slideDown( 500, 'swing',
        function(){
            $("#plus").text("-")
            $(this).addClass("display_block");
        });
},function(){
    $(".th_slidingDiv").slideUp( 500, 'swing',
        function(){
            $("#plus").text("+")
            $(this).removeClass("display_block");
        });
});

    // Set the columns class for each module.
    if(ot_get_option('tophat_columns_count') != '') : 
            $myth_header_columns = ot_get_option('tophat_columns_count');
        else : 
            $myth_header_columns = "sixteen columns";
        endif;

    ?> 

    <!-- Start Tophat Dropdown -->
    <div class="super-container full-width" id="section-tophat-dropdown">
        <div class="th_slidingDiv" style="display: none;">
            <div class="container clearfix">
                <div class="<?php echo esc_attr( $myth_header_columns ); ?>">
                    <?php if ( !function_exists( 'dynamic_sidebar' ) || !dynamic_sidebar('dropdown-widget-1') ) ?>
                    </div>
                <div class="<?php echo esc_attr( $myth_header_columns ); ?>">
                    <?php if ( !function_exists( 'dynamic_sidebar' ) || !dynamic_sidebar('dropdown-widget-2') ) ?>
                    </div>
                <div class="<?php echo esc_attr( $myth_header_columns ); ?>">
                    <?php if ( !function_exists( 'dynamic_sidebar' ) || !dynamic_sidebar('dropdown-widget-3') ) ?>
                    </div>
                <div class="<?php echo esc_attr( $myth_header_columns ); ?>">
                    <?php if ( !function_exists( 'dynamic_sidebar' ) || !dynamic_sidebar('dropdown-widget-4') ) ?>
                    </div>
            </div>
        </div>
    </div>
    <!-- /End Tophat Dropdown -->

<?php endif; ?> 
<!-- /End Tophat Dropdown Check -->

<!-- Get The Tophat -->
<?php get_template_part( 'theme-core/theme-elements/element', 'tophat' ); ?>

<!-- Top Hat -->
<?php if (get_option_tree('top_hat') != 'off') : ?>
<div id="section-tophat" class="clearfix full-width">

<!-- 960 Container -->
<div class="container">         

    <div class="sixteen columns">

        <div class="left">

            <!-- DROPDOWN TOGGLE BUTTON -->
            <?php if (ot_get_option('top_hat_dropdown') == "on" ) : ?>
            <div class="th_banner" >
                <div class="th_show_hide th_flag_toggle" >

                    <div class="th_trigger arrow">
                        <i aria-hidden="true" data-icon="&#xe62b;"></i>                 
                    </div>

                    <?php if(ot_get_option('top_hat_blurb')) : ?>
                        <div class="th_trigger blurb"><?php echo esc_html( ot_get_option('top_hat_blurb') ); ?></div> &nbsp;
                    <?php endif; ?>

                </div>
            </div>
            <?php endif; ?>    
            <!-- /End DROPDOWN TOGGLE BUTTON -->

        </div>                          

        <div class="right">
            <!-- Menu -->
            <div class="tophat_navigation">
                <div class="container">

                    <nav>
                        <?php get_template_part( 'theme-core/theme-elements/element', 'secondary-navigation' ); ?>
                    </nav>

                    <?php if (ot_get_option('top_hat_login') == "on" ) : ?>
                        <?php
                        if ( class_exists( 'WooCommerce' ) ) { ?>

                            <span class="account">
                            <?php global $woocommerce;
                                if ( is_user_logged_in() ) : 
                                ?>
                                    <a href="<?php echo esc_url( get_permalink( get_option('woocommerce_myaccount_page_id') ) ); ?>">My Account </a>
                                <?php else : ?>
                                    <a href="<?php echo esc_url( get_permalink( get_option('woocommerce_myaccount_page_id') ) ); ?>" title="<?php _e('Login / Register','woothemes'); ?>"><?php _e('Login / Register','woothemes'); ?></a>
                                <?php endif; ?>
                                    <a href="<?php echo esc_url( $woocommerce->cart->get_checkout_url() ); ?>">Cart </a>
                            </span>

                        <?php } else {
                          // you don't appear to have WooCommerce activated
                        }
                        ?>
                    <?php endif; ?>

                    <?php if (ot_get_option('top_hat_right_blurb') ) : ?>

                        <div class="right-blurb">
                            <div class="blurb"><?php printf( ot_get_option('top_hat_right_blurb') ); ?></div>
                        </div>

                    <?php endif; ?>

                </div>
            </div>

            <?php if(ot_get_option('top_hat_social') == "on" ) :
                        get_template_part( 'theme-core/theme-elements/element', 'getsocial' );
                    endif; ?>

            <?php if (ot_get_option('top_hat_search') == "on" ) : ?>

                <div class="search">
                    <?php if(class_exists('AJAXY_SF_WIDGET')) :
                        get_search_form();
                    else : ?>           
                        <?php get_template_part( 'theme-core/theme-elements/element', 'searchform' ); ?>
                    <?php endif; ?>
                </div>

            <?php endif; ?>

        </div>  

    </div>

</div>

<div class="stripe_color"></div>
</div>
<?php endif; ?>

Answer 1

更好的回答：

.th_slidingDiv元素的CSS规则不应该是内联的，而是在样式表中完成，否则无法使用CSS规则覆盖其行为，因为内联样式优先。

你应该替换：

$(this).addClass("display_block");与$(this).show();
$(this).removeClass("display_block");与$(this).hide();

jQuery将根据需要使用.th_slidingDiv或display:block;覆盖display:none;上的内联样式。

原始答案：

.th_slidingDiv元素的CSS规则不应该是内联的，而是在样式表中完成，否则无法使用CSS规则覆盖其行为，因为内联样式优先。

HTML应如下所示：

<div class="th_slidingDiv">
    ...
</div>

CSS应如下所示：

.th_slidingDiv {
    display: none;
}

#section-tophat-dropdown:hover .th_slidingDiv {
    display: block;
}

尝试在悬停或鼠标悬停时制作顶帽下拉菜单

1 个答案: