mouseover and mouseout functions in dropdown menu

问题

html

<div class="hidden-nav">
    <h4>lorem</h4>
    <ul class="decor-menu-list">
        <li><a href="#">123</a></li>
        <li><a href="#">123</a></li>
        <li><a href="#">123</a></li>
        <li><a href="#">321</a></li>
        <li><a href="#">123</a></li>
    </ul>
</div><!-- hidden-nav -->
<aside class="fixed-col">
<div class="fix-wrap cf">
    <div class="fixed-col-inner">
        <h1>123</h1>
        <div class="menu-button">
            <a href="#" onclick="return false" class="close-menu"></a>
        </div><!-- menu-button -->
        <div class="menu-side">

            <ul class="second-nav">
                <li class="open-hidden-nav"><a href="#" onclick="return false">SHOW HIDDEN MENU</a></li>
                <li><a href="#">7</a></li>
                <li><a href="#">6</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">4</a></li>
            </ul>
        </div><!-- menu-side -->
    </div><!-- fixed-col-inner -->
    </div><!-- fix-wrap -->
</aside><!-- fixed-col -->
<aside class="fixed-col-closed">
    <div class="fix-wrap">
        <div class="fixed-col-closed-inner">
            <div class="menu-button">
                <a href="#" onclick="return false" class="open-menu"></a>
            </div><!-- menu-button -->
            <ul class="closed-fav">
                <li class="fav-ico"></li>
                <li><a href="#">0</a></li>
            </ul>
            <ul class="closed-social">
                <li class="facebook"><a href="#"></a></li>
                <li class="vk"><a href="#"></a></li>
            </ul>
        </div>
    </div><!-- fix-wrap -->
</aside><!-- fixed-col-close -->


<div class="to-top">
    <a href="#" class="scrollup">Scroll</a>
</div>
<section class="main-section cf opened-side">
    <div class="col">
        <article class="item">
            <a href="#"><img src="img/img1.jpg" height="286" width="366" alt=""></a>
            <h2><a href="#">header text</a></h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus possimus ab adipisci sit tenetur assumenda cupiditate iure modi minus repellat corrupti reiciendis sapiente sunt porro autem temporibus impedit quaerat perspiciatis?</p>
            <p>Unde consectetur vitae consequuntur error rerum laborum atque sequi explicabo aut necessitatibus omnis doloremque beatae voluptatum soluta fugiat nulla reiciendis deserunt. Dolore molestiae sint atque labore at quam ducimus itaque?</p>
            <p>Architecto facere eius magnam sed quae odit doloribus dicta. Aperiam consectetur magnam reprehenderit quod sint consequuntur quisquam ab delectus tempore in laudantium quis voluptate iure voluptatem minus placeat nulla officiis.</p>
            <a href="#" class="read-more">22</a>
            <div class="hidden-article-item">
                <p class="author"><a href="#">123</a></p>
                <p class="like-and-view"><span class="view">12</span> <span class="like">5</span></p>
            </div><!-- hidden-article-item -->
        </article>
        </div>
    </section>

I need it so that:

• When user hover in .open-hidden-nav a - appears dropdown menu, and if hovered .hidden-nav it stays visible
• When user changes target (anything else instead .open-hidden-nav a and .hidden-nav) - dropdown menu hold 1s and disappear.

I wrote this jQuery:

$(window).load(function(){
$(".open-hidden-nav a").on("mouseover", function () {
    $(".hidden-nav").addClass('open');
});

$(".hidden-nav").on("mouseover", function () {
    $(".hidden-nav").addClass('open');
    $(".open-hidden-nav").addClass('active');
});

$(".open-hidden-nav a").on("mouseout", function () {
    setTimeout( function(){
        $('.hidden-nav').removeClass('open');
    }, 1000);
});

$(".hidden-nav").on("mouseout", function () {
    setTimeout( function(){
        $(".hidden-nav").removeClass('open');
        $(".open-hidden-nav").removeClass('active');
    }, 1000);
});
});

but it does not work correctly, and css transitions are working in mouseover but are not working on mouseout..

One other question - Is it that mouseover and mouseout functions can be used cross browser or on mobile devices such as iPad?

Here is JsFiddle Link, I hope you'll help me)

回答1:

Okay, tuned your code a little and I believe it covers the desired functionality.

Fiddle: Horizontal dropdown menu

Code:

$(window).load(function () { var closeTimeout;

$(".open-hidden-nav a").hover(
//Hoverin;
function () {
    clearTimeout(closeTimeout);
    $(".hidden-nav").addClass('open');
},
//Hoverout;
function () {
    closeTimeout = setTimeout(function () {
        $(".hidden-nav").removeClass('open');
        $(".open-hidden-nav").removeClass('active');
    }, 1000);
});

$(".hidden-nav").hover(
//Hoverin;
function () {
    clearTimeout(closeTimeout);
    $(".hidden-nav").addClass('open');
    $(".open-hidden-nav").addClass('active');
},
//Hoverout;
function () {
    closeTimeout = setTimeout(function () {
        $(".hidden-nav").removeClass('open');
        $(".open-hidden-nav").removeClass('active');
    }, 1000);
});

});

Explanation:

Basically I've changed the mouseover and mouseout events with hover syntax, which accepts two functions as parameters. One for hoverin and one for hoverout, this fixes the problem you have with the inconsistency of mouseout.

The second change is exposing your timeout as a globally accessible variable so you can shut it down if you happen to move your mouse from the hidden menu back to the button that opens it. Because, after all, we don't want it to hide considering your mouse is over what opened it in the first place.

In all other cases it will close within one second.

来源：https://stackoverflow.com/questions/25426717/mouseover-and-mouseout-functions-in-dropdown-menu