顯示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中，即可立即使用！