Question

我有一个导航栏，当我将鼠标悬停在列表中的某个链接上时，我正试图从页面外获取两个动画链接并在我的其他链接旁边结束。

当前导航链接：

<div class="links">
  <ul>
     <li>
         <a href="#">link 1</a>
     </li>
     <li>
         <a href="#">link 2</a>
     </li>
     <li>
         <a href="#">link 3</a>
     </li>
  </ul>
</div>

和.links的css：

.links ul {
    white-space: nowrap;
    list-style-type: none;
    position: fixed;
    top: 8px;
    left: 60%;
    z-index: 4; 
    width: auto;
    height: 67px;
}

.links li  {
    white-space: nowrap;
    display: inline-block;
    margin-right: 30px;
    z-index: 4;
    height: 40px;
}

这是相关的css，以及我目前正常运行的动画：

.extralinks {
    position: fixed;
    top: 8px;
    left: 90%;
    animation-name: slidey;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: running;
/* Safari and Chrome */
    -webkit-animation-name: slidey;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-play-state: running;
    z-index: 4;
}

@keyframes slidey {
    0% {left: 90%; top: 8px;}
    100% {left: 40%; top: 8px;}
}

@-webkit-keyframes slidey /* Safari and Chrome */ {
    0% {left: 90%; top: 8px;}
    100% {left: 40%; top: 8px;}
}

.links li:nth-child(3) {
    background-color: Red;
}

.extralinks的标记

<div class="extralinks">
<ul>
    <li>
       <a href="#">link 4</a>
    </li>
    <li>
       <a href="#">link 5</a>
    </li>
</ul>
</div>

我需要这样做，以便当有人在“链接3”上方悬停时，动画链接会从我的链接右侧和末端滑入。我不太确定如何将动画链接到我的列表中的“链接3”。有帮助吗？我不会反对使用javascript / jquery，我只是不熟悉。

谢谢！

Answer 1

我并不完全清楚你的目标，但我做了一些假设，并将jsFiddle打成一片。我之所以使用css过渡，是因为我认为它是一个：悬停动画，这使子菜单返回到它的位置。

* {
    padding:0;
    margin:0;
}
.links {
    width:100%;
}
.links > menu {
    width:100%;
    text-align:center;
}

.links menu li  {
    display: inline-block;
    position:relative;
    padding:0.75em 1em;
}
.l3 .extralinks {
    position:absolute;
    top:2em;
    left:100%;
    z-index: 4;

    -webkit-transition:all 1s ease-in-out 0s;
    -moz-transition:all 1s ease-in-out 0s;
    -o-transition:all 1s ease-in-out 0s;
    -ms-transition:all 1s ease-in-out 0s;
    transition:all 1s ease-in-out 0s;
}
.l3:hover .extralinks {
    left:0;    
}
.l3:hover .extralinks li {
    display:block;
}
.links li:nth-child(3) {
    background-color: Red;
}

    <div class="links">
      <menu>
         <li>
             <a href="#">link 1</a>
         </li>
         <li>
             <a href="#">link 2</a>
         </li>
         <li class="l3">
             <a href="#">link 3</a>
             <menu class="extralinks">
                 <li>
                     <a href="#">link 4</a>
                 </li>
                 <li>
                     <a href="#">link 5</a>
                 </li>
             </menu>
         </li>
      </menu>
    </div>

当鼠标悬停在不同的元素上时，CSS3动画会开始吗？

1 个答案: