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

Question

当我将鼠标悬停在nav li a上时，我试图显示css动画。 到目前为止，我已经尝试了几个不同的示例来说明如何显示和隐藏来自不同元素的信息，但是可以使我的工作正常进行。 这是CSS和HTMl，我没有提供任何jS或jQuery因为我可以使用任何jS或jQuery ，但在下面，您可以使用jsfiddle 。 所有帮助高度赞赏。

        .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>

小提琴

Answer 1

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

DEMO

CSS：

.box {
    -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;
    height:0;
}
.box.show {
    -webkit-animation: dropdownbar 1s ease;
    -moz-animation: dropdownbar 1s ease;
    -o-animation: dropdownbar 1s ease;
    animation: dropdownbar 1s ease;
    height:35px;
}
@-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;}
}

jQuery的：

$('nav li a').hover(function () {
    $('.box').toggleClass('show');
});

Answer 2

您可以尝试使用此jQuery。 您只需要根据需要对其进行修改即可，但这应该可以帮助您入门。

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

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

如果将其放在jsFiddle的javascript部分中，它将起作用。

Answer 3

您必须为div 框添加样式

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

并添加以下javascript代码：

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

查看更新的小提琴： 更新的小提琴

Answer 4

你去了:)。 假设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并将其粘贴到您的jsFiddle中，即可立即使用！