将鼠标悬停在包含div但不总是有效的位置

Question

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

Our Navigation

子菜单的工作原理：

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