Question

所有。这是我之前提出的一个问题的后续问题。回答这个问题的人建议将后续行动作为一个单独的问题。

所以，我有一个视频页面，我正在尝试复制。该页面位于：https://drive.google.com/drive/folders/0B_EvMbZuQ7C7eUpvN1N2OWpldlU。我希望你能够看到它。在视频中，在页面的右下角，有一个导航菜单，包括Home，About，Schedule和Contact。在视频中，用户将鼠标悬停在主页上，并且从屏幕左侧进入爪子打印图像/图标并在Home下面，将单词Home向上推。然后，当人在“关于”上方悬停时，图标从“主页”移动到“关于”。当您将鼠标悬停在每个列表项上时，它会对此执行此操作。

在上一个问题的帮助下，我现在可以从左侧进入图标，并在Home下方。但是，当我将鼠标悬停在“关于”，“计划”或“联系人”上时，图标将从其所在的项目中消失，然后再从屏幕左侧进入。

这是我的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来完成。只要它有效，我会采取其中任何一种。

感谢您的帮助！

Answer 1

这有一些小问题，但主要是你正在寻找的。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>
	 <img src="http://auto.ferrari.com/en_EN/wp-content/themes/ferrari-gt/img/logo_ferrari.png" id="paw"/>
</footer>

＆＃13;

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

1 个答案: