Question

我们目前有一个全球导航，下拉子菜单导航工作正常。我们决定在悬停到子菜单项时添加动画。然而，我们目前遇到的问题是动画不会在初始悬停时触发。

子菜单如何工作：

$(document).ready(function(){
    $("#services-wrap,#menu-item-99").mouseenter(function(){
        $("#services-wrap,#services-dropdown").show();
    });
    $('#services-wrap,#menu-item-99').mouseleave(function(){
        $("#services-wrap,#services-dropdown").hide();
    });
    $("#product-wrap,#menu-item-102").mouseenter(function(){
        $("#product-wrap,#product-dropdown").show();
    });
    $('#product-wrap,#menu-item-102').mouseleave(function(){
        $("#product-wrap,#product-dropdown").hide();
    });
});

以下是我们如何设置子菜单的想法：

<div id="services-wrap">
    <div id="services-dropdown">
        <a href="/services/home-automation/">
            <div id="home-automation">
                <img src="/wp-content/themes/va/images/home-automation-bg.png">
                <p>Home<br> Automation</p>
            </div>
        </a>
    </div>
</div>

悬停动画css：

#services-dropdown a:hover div, #product-dropdown a:hover div{
    -webkit-transition: all 1.5s ease;
    transition: all 1.5s ease;
    background: #424242;
}

#services-dropdown a:hover img, #product-dropdown a:hover img{
    -webkit-transition: all 1.0s ease;
    transition: all 1.0s ease;
    transform-style: preserve-3d;
    -webkit-transform: rotateY(360deg); /* Safari */
    transform: rotateY(360deg);
}

Answer 1

在你的jquery中，我发现你在输入services

时拼写错误

$("#services-wrap,#servcies-dropdown").show();

看看#servcies-dropdown 我想你应该写#services-dropdown

将鼠标悬停在包含div上并不总是有效

1 个答案: