將圖像從一個導航菜單列表項移動到另一個

全部。這是我之前詢問的問題的後續問題。回答這個問題的人建議將後續行動作爲一個單獨的問題。將圖像從一個導航菜單列表項移動到另一個

所以，我有一個視頻頁面，我試圖複製。頁面在這裏：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

將圖像從一個導航菜單列表項移動到另一個

回答

相關問題