Javascript 显示div并在“on”上的单独div中执行CSS动画；“li hover”；

当我在

nav li a

上悬停时，我试图显示css动画。到目前为止，我已经尝试了几个不同的例子来说明如何显示和隐藏来自不同元素的信息，但可以让我的工作。这里是CSS和HTMl，我不提供任何

jS

或

jQuery

，因为我可以让任何东西工作，但下面有一个

jsiddle

可以使用。非常感谢您的帮助

        .box {
      -webkit-animation: dropdownbar 1s ease;
      -moz-animation:    dropdownbar 1s ease;
      -o-animation:      dropdownbar 1s ease;
      animation:         dropdownbar 1s ease;
      -webkit-animation-fill-mode: forwards;
      -moz-animation-fill-mode: forwards;
      -o-animation-fill-mode: forwards;
      animation-fill-mode: forwards;
      width:100%;
      background-color:#000;
      color:#fff

    }

    @-webkit-keyframes dropdownbar {
      0%   { height: 0px; }
      100% { height: 35px; }
    }
    @-moz-keyframes dropdownbar {
      0%   { height: 0px; }
      100% { height: 35px; }
    }
    @-o-keyframes dropdownbar {
      0%   { height: 0px; }
      100% { height: 35px; }
    }
    @keyframes dropdownbar {
      0%   { height: 0px; }
      100% { height: 35px; }
    }

        <nav class="nav">
        <ul>
        <li class="navLink"><a href="#">Home</a></li>
        <li class="navLink"><a href="#">Away</a></li>    
        </ul>
        </nav>

        <div class="box">this should show only when hovering li element</div>

.box{
-webkit动画：dropdownbar 1s轻松；
-moz动画：下拉菜单1s轻松；
-o动画：下拉菜单1s轻松；
动画：下拉菜单1s轻松；
-webkit动画填充模式：正向；
-moz动画填充模式：正向；
-o-动画-填充模式：正向；
动画填充模式：正向；
宽度：100%；
背景色：#000；
颜色：#fff
}
@-webkit关键帧下拉菜单{
0%{高度：0px；}
100%{高度：35px；}
}
@-moz关键帧下拉菜单{
0%{高度：0px；}
100%{高度：35px；}
}
@-o关键帧下拉菜单{
0%{高度：0px；}
100%{高度：35px；}
}
@关键帧下拉菜单{
0%{高度：0px；}
100%{高度：35px；}
}




仅当悬停li元素时，才应显示此选项

---

您可以使用jQuery通过类更改触发CSS3动画：

CSS:

jQuery：

---

您必须将div框的样式添加为

<div class="box" style="display:none">

---

请参阅更新的fiddle:

您可以尝试此jQuery。你只需要根据自己的需要修改它。。。但这应该让你开始

$(".navLink").mouseenter(function(){
    $(".box").css("visibility", "visible")
});

$(".navLink").mouseleave(function(){
    $(".box").css("visibility", "hidden")
});

如果您将它放在JSFIDLE的javascript部分中，它就可以工作

好了：）。假设jquery已启动并正在运行

$(document).ready(function() {
    var divToShow = $('.box');
    var links = $('.navLink');
    var fadeDuration = 500;

    //initial hiding of div
    divToShow.hide();

    //add listener when mouse enters hover-state on link
    links.mouseenter(function() {
        //stop animation if there is one
        divToShow.stop();
        //fade it in
        divToShow.fadeIn();
    });
    //add listener for when mouse leaves link
    links.mouseleave(function() {
        //stop animation if there is one
        divToShow.stop();
        //fade it out
        divToShow.fadeOut();
    });
});

这最初会隐藏您的div，并在悬停时淡入淡出。与其他解决方案相比，这还考虑了从一个链接到另一个链接的悬停切换，而不会明显改变动画。完全平滑…；）

---

只需选择jQuery 2.1并将其粘贴到您的JSFIDLE中……应该可以立即工作

谢谢。如果我想在退出“li”时反转动画，即在进入链接时使div“增长”，在退出链接时使div“收缩”，该怎么办？@no0ne我不会使用关键帧，但css转换如下：@no0ne you；）很高兴我能帮忙！

$(document).ready(function(){
    $(".navLink").hover(function(){
        $(".box").toggle();
    });
});

$(".navLink").mouseenter(function(){
    $(".box").css("visibility", "visible")
});

$(".navLink").mouseleave(function(){
    $(".box").css("visibility", "hidden")
});

$(document).ready(function() {
    var divToShow = $('.box');
    var links = $('.navLink');
    var fadeDuration = 500;

    //initial hiding of div
    divToShow.hide();

    //add listener when mouse enters hover-state on link
    links.mouseenter(function() {
        //stop animation if there is one
        divToShow.stop();
        //fade it in
        divToShow.fadeIn();
    });
    //add listener for when mouse leaves link
    links.mouseleave(function() {
        //stop animation if there is one
        divToShow.stop();
        //fade it out
        divToShow.fadeOut();
    });
});