CSS3动画开始时，悬停在一个不同的元素

CSS3 animation begin when hovering over a different element?

本文关键字：一个 元素 开始时 动画 悬停 CSS3      更新时间：2023-09-26

我有一个导航栏，我试图得到两个链接动画从页外和结束旁边我的其他链接当我悬停在我的列表中的一个链接。

当前导航链接:

<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;
}
. extrallinks 
<div class="extralinks">
<ul>
    <li>
       <a href="#">link 4</a>
    </li>
    <li>
       <a href="#">link 5</a>
    </li>
</ul>
</div>

我需要使它，当有人悬停在"链接3"动画链接滑进从右边和结束旁边我的链接。我不太确定如何准确地将动画链接到我列表中的"链接3"。任何帮助吗?我不反对使用javascript/jquery，我只是不太精通。

谢谢!

我不太清楚您的目标，但我做了一些假设并将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>
相关文章：