Question

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>

我需要它以便：

当用户悬停在.open-hidden-nav a时 - 会出现下拉菜单，如果悬停.hidden-nav则会保持可见
当用户更改目标（其他任何内容而不是.open-hidden-nav a和.hidden-nav）时 - 下拉菜单会保留1并消失。

我写了这个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);
});
});

但它无法正常工作，并且css转换正在鼠标悬停中工作，但不能在mouseout上工作..

另一个问题 - 是否可以通过浏览器或iPad等移动设备使用mouseover和mouseout功能？

以下是JsFiddle Link，我希望您能帮助我

Answer 1

好的，稍微调整了您的代码，我相信它涵盖了所需的功能。

小提琴：Horizontal dropdown menu

<强>代码：

$（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);
});

}）;

<强>解释

基本上我用hover syntax更改了mouseover和mouseout事件，它接受两个函数作为参数。一个用于 hoverin ，另一个用于 hoverout ，这解决了鼠标输出不一致的问题。

第二个更改是将超时作为全局可访问变量公开，因此如果您碰巧将鼠标从隐藏菜单移回打开它的按钮，则可以将其关闭。因为，毕竟，我们不希望它隐藏起来，因为你的鼠标已经完全打开了它。

在所有其他情况下，它将在一秒钟内关闭。

鼠标悬停和鼠标输出功能在下拉菜单中

1 个答案: