Question

我正在尝试在nav li a上悬停时显示css动画。到目前为止，我已经尝试了几个不同的例子来说明如何显示和隐藏来自不同元素的信息，但可以让我的工作。这是CSS和HTMl，我没有提供任何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>

FIDDLE

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();
    });
});

请参阅更新的小提琴：Updated fiddle

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中......应立即生效！

显示div并在单独的div中执行CSS动画＆＃34; li hover＆＃34;

4 个答案: