如何使我懸停的<li>元素保持原位？

每當我將滑鼠懸停在串列中的某個專案上時，一切都會開始閃爍并來回移動。我想要做的是擁有這份清單。當懸停在其中一個元素上時，它應該將文本列印到影像的右側。我希望我懸停的影像保持原位，因為其他所有內容都移到一邊，并且文本具有打字機效果。

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>

uj5u.com熱心網友回復：

我將#nav 更改為flex 和.hover a:hover p 和p 中的一些css 屬性。然后我在將文本調整到彩色框旁邊的底部時遇到了一些問題。我使用margin-top：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>

uj5u.com熱心網友回復：

我已經解決了你的問題。它很容易解決您需要將以下代碼添加到 CSS 的所有問題。

首先你的#nav需要一個顯示屬性：
display:flex;

其次，您的#nav li需要以下屬性：
display:flex;
align-items:flex-end;

我希望這能解決你的問題......

uj5u.com熱心網友回復：

我花了比預期更多的時間，因為我確定腳本中存在錯誤，但我錯了，問題出在@keyframes typing，只需將寬度更改為 35% 即可解決您的問題

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 35%;
  }
}

 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: 35%;
  }
}

@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>

標籤：javascript html css

上一篇：如何在右側應用帶有徽章文本的“文本溢位：省略號”主題？

下一篇：如何防止textarea元素拉伸超過一定高度