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

Question

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

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

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

对于样式，我有:

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

该网站以小猫为主题。我想要的是，当我将鼠标悬停在其中一个列表项上时，例如Schedule，我有一个爪印图标，会从左边滑入到Schedule这个词所在的位置，同时Schedule这个词会垂直移动，使爪印在Schedule这个词的下方居中，但与另一个大致对齐列出没有移动的元素。然后，当您将鼠标悬停在另一个列表项上时，例如Contact，Contact 一词升起，爪印在其下方移动，而 schedule 一词下沉至其在该行中的先前位置。换句话说，爪印会移动以显示您正在选择的元素。

我有部分提升了这个词(在某种程度上)。我使用了两种不同的代码，两者似乎都产生了相同的效果。第一个是 CSS:

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

另一个是jQuery:

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

});

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

至于爪印，我尝试添加

background-image: url("pawprint");

到我的 li:hover，连同一个 display: block 。我还尝试将图像添加到 jQuery.css。使用 jQuery，爪印显示在 48vh 级别的单词后面，而不是单词下方。

不知道您是否需要任何其他信息，但我们将不胜感激。谢谢!

Answer 1

您可以在span 内设置文本元素作为 li 的子节点元素;使用 css :before li 处的伪元素带有 content 的元素设置为 url()以图像 URL 作为参数的函数，opacity设置为 0 .设置transition的 span li 的 child 至 top 1s ease-in-out .

在 :hover的 li:before , 设置 opacity至 1 , 开始 animation的 margin-left来自 -100%至 0%图片集在 content .设置top的 span至 -25px ，或 height 的一半图片集在 content , 将文本移动到从左侧滑入的图像上方。

li {
  margin-top: 52vh;
  float: right;
  padding: 8px;
  list-style: none;
  width: 50px;
  height: 50px;
}

li span {
  position: relative;
  transition: top 1s ease-in-out;
}

li:before {
  content: url("http://lorempixel.com/50/50/cats");
  background-repeat: no-repeat;
  position: absolute;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

li:hover:before {
  opacity: 1;
  animation: slide 1s;
}

li:hover span {
  top: -25px;
}

@keyframes slide {
  from {
    margin-left: -100%;
  }
  to {
    margin-left: 0%;
  }
}

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