javascript - 如何使我悬停的 <li> 元素保持在原位？

Question

每当我将鼠标悬停在列表中的一项上时，所有内容都会开始闪烁并来回移动。我想做的就是拥有这个 list 。当将鼠标悬停在其中一个元素上时，它应该将文本打印到图像的右侧。我希望当其他所有内容移到一边并且文本应用了打字机效果时，我悬停的图像保持在原位。

var nav = document.querySelectorAll('#nav li');
for (i = 0; i < nav.length; i++) {
  nav[i].className = 'hover'
}

var pnav = document.querySelectorAll('#nav p');
for (i = 0; i < pnav.length; i++) {
  pnav[i].className = 'typewriter'
}

body {
  background-color: #0f1621;
  margin: 0;
  display: flex;
  justify-content: center;
  min-height: 100%;
}

#nav {
  margin-top: 25%;
}

#nav li {
  display: inline-block;
  padding: 2px;
  color: white;
}

.hover a:hover+p {
  display: inline-block;
}

p {
  display: none;
  font-size: 20px;
}

.typewriter {
  color: #fff;
  font-family: monospace;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: .15em;
  border-right: .15em solid orange;
  animation: typing 1s steps(30, end), blink-caret .75s step-end infinite;
}

@keyframes typing {
  from {
    width: 0
  }
  to {
    width: 100%
  }
}

@keyframes blink-caret {
  from,
  to {
    border-color: transparent
  }
  50% {
    border-color: orange;
  }
}

<ul id="nav">
  <li>
    <a href=""><img src="https://via.placeholder.com/150/0000FF/808080/?text=folder.png"></a>
    <p> Socials</p>
  </li>
  <li>
    <a href=""><img src="https://via.placeholder.com/150/FF0000/FFFFFF/?text=linkedin.png"></a>
    <p> LinkedIn</p>
  </li>
  <li>
    <a href=""><img src="https://via.placeholder.com/150/FFFF00/000000/?text=CV.png"></a>
    <p> Resume</p>
  </li>
</ul>

Answer 1

我将 #nav 更改为 flex 以及 .hover a:hover+p 和 p 中的一些 css 属性。 然后我在将文本调整到彩色框旁边的底部时遇到了一些问题。我使用边距顶部:xxxPX。也许存在更好的解决方案来定位文本。但它确实有效。

var nav = document.querySelectorAll('#nav li');
for (i = 0; i < nav.length; i++) {
  nav[i].className = 'hover'
}

var pnav = document.querySelectorAll('#nav p');
for (i = 0; i < pnav.length; i++) {
  pnav[i].className = 'typewriter'
}

body {
  background-color: #0f1621;
  margin: 0;
  display: flex;
  justify-content: center;
  height: 100vh;
}

#nav {
  margin-top: 5%;
  display:flex;
}

#nav li {
  display: flex;
  padding: 2px;
  color: white;  
  
}

.hover a:hover+p {
  display: block;  
  margin-bottom: auto; 
  margin-top: auto;       
  margin-top:127px;
}

p {
  display: none;
  font-size: 20px;  
}

.typewriter {
  color: #fff;
  font-family: monospace;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: .15em;
  border-right: .15em solid orange;
  animation: typing 1s steps(30, end), blink-caret .75s step-end infinite;
}

@keyframes typing {
  from {
    width: 0
  }
  to {
    width: 100%
  }
}

@keyframes blink-caret {
  from,
  to {
    border-color: transparent
  }
  50% {
    border-color: orange;
  }
}

<ul id="nav">
  <li>
    <a href=""><img src="https://via.placeholder.com/150/0000FF/808080/?text=folder.png"></a>
    <p> Socials</p>
  </li>
  <li>
    <a href=""><img src="https://via.placeholder.com/150/FF0000/FFFFFF/?text=linkedin.png"></a>
    <p> LinkedIn</p>
  </li>
  <li>
    <a href=""><img src="https://via.placeholder.com/150/FFFF00/000000/?text=CV.png"></a>
    <p> Resume</p>
  </li>
</ul>