将图像从一个导航菜单列表项移动到另一个

全部。这是我之前询问的问题的后续问题。回答这个问题的人建议将后续行动作为一个单独的问题。将图像从一个导航菜单列表项移动到另一个

所以，我有一个视频页面，我试图复制。页面在这里：https://drive.google.com/drive/folders/0B_EvMbZuQ7C7eUpvN1N2OWpldlU。我希望你能看到它。在页面右下方的视频中，有一个导航菜单，包括主页，关于，日程安排和联系人。在视频中，用户将鼠标悬停在Home上，并从屏幕左侧进入爪印图像/图标，并置于Home下方，将单词Home up推。然后，当人物悬停在About上时，图标从Home移动到About。当你将鼠标悬停在列表上时，它会为每个列表项目执行此操作。

在上一个问题的帮助下，我现在有了它从左侧进入的图标，并放在Home下。但是，当我将鼠标悬停在About，Schedule或Contact上时，该图标从它所在的项目中消失，然后从屏幕左侧再次进入。

这里是我的CSS代码：

li{ 
      display: inline; 
      float: right; 
      margin-right: 2vw; 
      padding-top: 52vh; 
     } 
     li span{ 
      position: relative; 
      transition: top 1s ease-in-out; 
     } 
     li::before{ 
      content: url("images/pawprint.png"); 
      background-repeat: no-repeat; 
      background-position: center; 
      position: absolute; 
      transform: translate(100%); 
      opacity: 0; 
      transition: opacity /*1s*/ ease-in-out; 
     } 
     li:hover::before{ 
      opacity: 1; 
      animation: slide 1s; 
     } 

     li:hover span { 
      top: -4vh; 
     } 
     @keyframes slide{ 
      from { 
       margin-left: -100%; 
      } 
      to { 
       margin-left: 0%; 
      } 
     }

这里是我的HTML代码：

<footer> 
      <nav id="menu"> 
       <ul> 
        <li class="orange"><span>Contact</span></li> 
        <li class="orange"><span>Schedule</span></li> 
        <li class="orange"><span>About</span></li> 
        <li class="orange"><span>Home</span></li> 
       </ul> 

      </nav> 
     </footer>

我没有任何jQuery代码呢。还没有弄清楚这个问题是否需要jQuery/JavaScript，或者只能用CSS来完成。我会采取，只要它的工作。

感谢您的帮助！

来源

2017-03-23 David Tarvin

我才意识到该视频是在已经与我分享谷歌的驱动器，所以我不知道是否有任何的你就能看到它。如果没有，任何人都可以告诉我在哪里可以复制它，以便您可以看到它？有没有办法把它放在GitHub上？任何其他想法？ –

这有几个小故障，但主要是你在找什么。

var paw=document.getElementById('paw'); 
 
    var lis= document.getElementsByTagName('li'); 
 
    window.onload=function(){ 
 
     for(var i=0;i<lis.length;i++){ 
 
\t li=lis[i]; 
 
\t li.addEventListener('mouseover',function(){ 
 
\t  paw.style.left=Math.round(this.getBoundingClientRect().left)+"px"; 
 
\t }); 
 
\t li.addEventListener('mouseout',function(){ 
 
\t  paw.style.left="0px"; 
 
\t }); 
 
    }};

li { 
 
    display: inline; 
 
\t float: right; 
 
\t padding-right: 2vw; 
 
\t padding-top: 52vh; 
 
} 
 
#paw{ 
 
    position:relative;top:52vh;left:0;transition: 1s; 
 
} 
 
li span { 
 
    position: relative; 
 
\t transition: top 1s; 
 
} 
 

 
li:hover span { 
 
\t top: -20px; 
 
}

<footer> 
 
    <nav id="menu"> 
 
     <ul> 
 
      <li class="orange"><span>Contact</span></li> 
 
      <li class="orange"><span>Schedule</span></li> 
 
      <li class="orange"><span>About</span></li> 
 
      <li class="orange"><span>Home</span></li> 
 
     </ul> 
 
\t </nav> 
 
\t <img src="http://auto.ferrari.com/en_EN/wp-content/themes/ferrari-gt/img/logo_ferrari.png" id="paw"/> 
 
</footer>

来源

2017-03-23 14:50:06 frederick99

将图像从一个导航菜单列表项移动到另一个

回答

相关问题