Question

我觉得我必须遗漏一些东西，因为我在搜索时找不到任何关于这个问题的信息，尽管我知道我已经在几个网站上看过这种技术。

我的屏幕底部附近有一个水平导航菜单。基本上右下方列出了4个项目。没有代码在我面前，但从内存中代码是这样的：

`<nav>
    <ul>
        <li>Contact</li>
        <li>Schedule</li>
        <li>About</li>
        <li>Home</li>
    </ul>
 </nav>`

对于造型，我有：

li{
    margin-top: 52vh;
    float: right;
}

该网站以小猫为主题。我想要的是，当我将鼠标悬停在其中一个列表项上时，例如时间表，我有一个pawprint图标将从左侧滑入到Schedule单词所在的位置，同时单词Schedule将垂直移动，以便pawprint在单词Schedule下面居中，但大致与另一个排成一行列出尚未移动的项目。然后，当您将鼠标悬停在另一个列表项上时，例如联系人，联系人这个词抬起，pawprint在它下面移动，而word计划下沉到它在线的前一个位置。换句话说，pawprint会移动以显示您正在选择的项目。

我有一个部分提到工作（有点）。我有两个不同的代码我用过，似乎都产生相同的效果。第一个是CSS：

li:hover{
    margin-top: 48vh;
}

另一个是jQuery：

$("li").hover(function(){
    $(this).css("margin-top", "48vh")
}, function {$(this).css("margin-top", "52vh")

}）;

我确实有一个闪烁的问题，当我将这个单词向上移动时，如果我不移动鼠标来覆盖它，那么它会立即向下移动，所以它会上下跳跃。

就pawprint而言，我尝试添加

background-image: url("pawprint");

to my li：hover，以及display：block。我也尝试将图像添加到jQuery.css中。使用jQuery，pawprint显示在48vh级别的单词后面，而不是在单词下面。

不知道您是否需要任何其他信息，但任何帮助将不胜感激。谢谢！

Answer 1

您可以将span元素中的文本设置为li元素的子节点;在css元素上使用:before li伪元素，content设置为url()函数，图片网址为参数，opacity设置为{{1 }}。将0 transition孩子的span设为li。

在top 1s ease-in-out的{{1}}，将:hover设置为li:before，从opacity开始1 animation到margin-left在-100%设置的图像的1}}。将0%的{{1}}设置为content，或设置为top的{{1}}图片的一半，以移动从左侧滑入的图片上方的文字。

＆＃13;

span

＆＃13;

-25px

＆＃13;

在导航菜单上的列表项下方滑动图像图标

1 个答案: