CSS 溢出属性不适用于导航栏链接

Question

我一直在研究我的作品集，我看到了这个视频，你将鼠标悬停在导航链接上，它们就会向上过渡。 YouTube Video

我根据视频应用的 css 溢出方法将删除重复的导航链接（关于我、工具等），但这对我不起作用，我无法弄清楚为什么。

相关HTMl:

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Protfolio</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
        <link rel="stylesheet" href="./style.css"/>
        
    </head>
    <body>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
        <nav>
          <div class="space1">
            <div class="centered-content nav-logo">Logo</div>
            <div class="centered-content empty-space1">
              <!--empty space-->
            </div>
          </div>
          <div class="space2">
            <div class="centered-content empty-space2">
              <!--empty space-->
            </div>
            <div class="centered-content nav-links">
              <ul class="centered-content">
                <li>
                  <a href="">
                    
                  <span>About Me</span>
                  <span>About Me</span>
                </a>
              </li> 
                <li>
                  <a href="">
                    <span> Contact</span>
                  <span> Contact</span>
                </a>
              </li>
                <li>
                  <a href="">
                    <span>Blog</span>
                    <span>Blog</span>
                  </a>
                </li>
                <li>
                  <a href="">
                  <span>Projects</span>
                  <span>Projects</span>
                </a>
              </li>
                <li>
                  <a href="">
                    <span>Tools</span>
                    <span>Tools</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
        <div class="intro-container">
       <div class="intro-para">
            <h1>Greetings All!!</h1>
                Intro-content</div>
           <div class="centered-content intro-image">
               the image goes 
           </div>
</div>
    </body>
</html>

相关CSS:

    /* ADDITION */

.centered-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
  
  
  /* END */
  
  * {
    box-sizing: border-box;
    margin: 0%;
    padding: 0%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }
  
  body {
    background-color:peachpuff;
    font-family: roboto;
    background-repeat: space;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  
  nav {
    display: flex;
    height: 10vh;
    background-color: crimson;
  }
  
  .space1 {
    justify-content: center;
    align-items: center;
    display: flex;
    width: 50%;
    
  }
  
  .nav-logo {
    display: flex;
    
    width: 50%;
    height: 100%;
  }
  
  .empty-space1 {
    display: flex;
    width: 50%;
    height: 100%;
  }
  
  .space2 {
    display: flex;
    width: 50%;
    
    height: 100%;
    justify-content: center;
    align-items: center;
  }
  
  .empty-space2 {
    display: flex;
    width: 50%;
    height: 100%;
  }
  
  .nav-links {
    display: flex;
    width: 50%;
    height: 100%;
    
  }
  
  .nav-links ul {
    display: inline-flex;
    list-style: none;
    /* REMOVED! */
    /* height: 100%; */

    
  }
  
  .nav-links ul li{
    position: relative;

  }
  .nav-links ul li a {
    position: relative;
    display: block;
    justify-content: space-evenly;
    text-decoration:none;
    margin: 0 .4em;
    color: black;  
    overflow: hidden;
    letter-spacing: 2px;
  }

  .nav-links ul li a span{
    display: flex;
    width: 100%;
    position: relative;
    transition: 0.5s;
    background-color: lightslategrey;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
    flex-direction: column;  
  }

  .nav-links ul li a:hover span{

  }

.intro-container{
      display: flex;
      padding: .2% .3% 0 .3% ;
  }

  .intro-para{    
      background-color:salmon;
      width: 50%;
      
  }

  .intro-image{
      width: 50%;
    background-color: lightskyblue;
  }

Answer 1

您的元素应该有高度。您没有像您提供的 Youtube 视频 link 中那样为 .nav-links ul li a 选择器提供高度或最大高度属性。

CSS 溢出属性不适用于导航栏链接

CSS Overflow property isn't working on navigation bar links

html

css

portfolio

CSS 溢出 属性 不适用于导航栏链接

CSS Overflow property isn't working on navigation bar links

html

css

portfolio

CSS 溢出属性不适用于导航栏链接