CODEWITHSUNDEEP
css
isd17
isd17

Reputation: 13

visibility change on mouseover

I have a menu in an ul-list in a div-container:

    <div  class="box">
    <div class="fullwidth-menu-nav">
    <ul>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
      <li><a href="#">Menu 4</a></li>
    </ul>
    </div>
    </div>

Here is the CSS-stylesheet:

    @-webkit-keyframes fadeIn { from { opacity:1; } to { opacity:0; } }
    @-moz-keyframes fadeIn { from { opacity:1; } to { opacity:0; } }
    @keyframes fadeIn { from { opacity:1; } to { opacity:0; } }

    .fullwidth-menu-nav {
     position:absolute;
     width: 100%;

     opacity:1;  
     -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
     -moz-animation:fadeIn ease-in 1;
     animation:fadeIn ease-in 1;

     -webkit-animation-fill-mode:forwards; 
     -moz-animation-fill-mode:forwards;
     animation-fill-mode:forwards;

     -webkit-animation-duration:1s;
     -moz-animation-duration:1s;
     animation-duration:1s;
    }

    .fullwidth-menu-nav ul li {
    -webkit-animation-delay: 1.7s;
    -moz-animation-delay: 1.7s;
    animation-delay: 1.7s;
    }

    /*---make a basic box ---*/
    .box{
    width: 200px;
    height: 200px;
    position: relative;
    margin: 10px;
    float: left;
    border: 1px solid #333;
    background: #999;
    }


    html body div.box:hover {
    opacity: 1;
    visibility: visible;
    border:8px solid #ff0;
    }

When loading this side, the List-Menu is shown and disappers after a few millisecons. What I want to getist that if I hover over the Box-Div, the List-Menu is shown again. So what is to do, to show the (invisible) li-Menu by hovering over another visible element (the Box-DIV)?

Upvotes: 0

Views: 53

Answers (1)

Henfs
Henfs

Reputation: 5411

Yes, you could add another animation on hover to reverse the opacity you did:

.fullwidth-menu-nav:hover {
  animation: appear 1s ease forwards;
}

@keyframes appear {
  from { opacity:0; } to { opacity:1; }
}

Upvotes: 1

Related Questions