How do I make the <li> element I'm hovering over stay in place?-CodePudding

Whenever I'm hovering over one of the items in my list everything starts flickering and moves back and forth. What I want to do is having this list. When hovering over one of the elements it should then print the text to the right side of the image. I would like that the image I'm hovering stays in place as everything else moves aside and the text has a typewriter effect applied to it.

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>

CodePudding user response：

I change #nav to flex and some css properties in .hover a:hover p and p. Then i had little problems with adjusting the text to the bottom next to the colored box. I use margin-top: xxxPX. Maybe exists a better solution to positioned the text. But it works.

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>

CodePudding user response：

I have solved your problem. Its quite easy to solve all you need to add following code to your CSS.

First of your #nav need a display property:
display:flex;

Secondly your #nav li need following properties:
display:flex;
align-items:flex-end;

I hope this will fix your problem...

CodePudding user response：

It took me more time than expected as I was sure there was a bug in the script, but I was wrong the issue is with the @keyframes typing, just change the width to 35% and your problem will be solved

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