Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

show div and execute CSS animation in separate div on "li hover"

show div and execute CSS animation in separate div on "li hover"

Problem

I am trying to show a css animation when hovering on nav li a. So far I have tried several different examples on how to show and hide information from different elements but can get mine to work. Here is the CSS and HTMl, I do not provide any jS or jQuery since I could get any to work but below you have a jsfiddle ready to go. All help highly appreciated.

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

        
this should show only when hovering li element

FIDDLE

Problem courtesy of: no0ne

Solution

You can use jQuery to trigger the CSS3 animation with a class change :

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');
});
Solution courtesy of: web-tiki

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

show div and execute CSS animation in separate div on "li hover"

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×