Question

我在div容器的ul列表中有一个菜单：

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

这是CSS样式表：

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

在加载此面时，将显示“列表”菜单，并在几毫秒后显示分页器。我想要得到的是，如果将鼠标悬停在Box-Div上，将再次显示“列表”菜单。那么，将鼠标悬停在另一个可见元素（Box-DIV）上来显示（不可见的）li-Menu是什么呢？

Answer 1

是的，您可以在animation上添加另一个hover来颠倒您所做的opacity：

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

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

鼠标悬停时的可见性更改

1 个答案: