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

全部。这是我以前问过的一个问题的后续问题。一位回答该问题的人建议将后续行动作为一个单独的问题

所以，我有一个视频页面，我正试图复制。页面位于此处：。我希望你能看到它。在视频中，页面右下角有一个导航菜单，包括主页、关于、日程安排和联系人。在视频中，用户将鼠标悬停在Home上，一个paw print图像/图标从屏幕左侧进入，并停留在Home下，将单词Home向上推。然后，当用户将鼠标悬停在上下左右时，图标将从“主页”移动到上下左右。当您将鼠标悬停在列表项上时，它会对每个列表项执行此操作

在上一个问题的帮助下，我现在有了它，图标从左侧进入，位于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来解决。只要行得通，我都愿意

---

谢谢你的帮助

这有一些小故障，但主要是您正在寻找的

var paw=document.getElementById（'paw'）；
var lis=document.getElementsByTagName（'li'）；
window.onload=function（）{
对于（var i=0；我刚刚意识到视频是在一个与我共享的谷歌硬盘上，所以我不知道你们中是否有人能够看到它。如果没有，有人能告诉我在哪里可以复制它，这样你就可以看到它吗？有没有办法把它放在GitHub上？还有其他想法吗？