li:hover>a 影响​​其他列表项

Question

我想要做的是获得悬停效果，使锚链接有点下降，但不知何故它会影响所有链接。有人能指出我在这里做错了什么吗？

nav {
      width: 100%;
      height: 5rem;
      background: red;
    }
    
    ul {
      margin: 0 auto;
      font-size: 0;
    }
    ul li {
      display: inline-block;
      line-height: 4.8rem;
      position: relative;
    }
    ul li > a {
      text-decoration: none;
      color: #FFF;
      font-family: "Verdana";
      padding: .1rem 1.5rem;
      font-size: 1.3rem;
      display: block;
      overflow: hidden;
      position: relative;
      transition: 300ms all;
      height: 100%;
      margin: 0;
    }
    ul li > a::before, ul li > a::after {
      content: '';
      width: 100%;
      position: absolute;
      left: 0;
      transition: 200ms all;
    }
    ul li > a::before {
      background: #FFF;
      height: .5rem;
      top: 0;
      transform: translateY(-100%);
    }
    ul li > a::after {
      background: #000;
      height: .4rem;
      bottom: 0;
      transform: translateY(100%);
    }
    ul li::before {
      content: '';
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: #CCC;
      position: absolute;
      opacity: 0;
    }
    ul li:hover > a {
      padding-top: 0.6rem;
      padding-bottom: 0.1rem;
    }
    ul li:hover > a::before, ul li:hover > a::after {
      transform: translateY(0);
    }
    ul li:hover::before {
      opacity: 0.3;
    }

 <nav>
      <ul>
        <li><a href="">Link1</a></li>
        <li><a href="">Link2</a></li>
        <li><a href="">Link3</a></li>
        <li><a href="">Link4</a></li>
        <li><a href="test.html">Link5</a></li>
      </ul>
    </nav>

为什么li:hover > a 会影响所有列表项？

Answer 1

问题不是您的:hover 选择器，而是lis 上的display-block。 inline-blockelements 在基线上对齐，这意味着当您将 padding-top 添加到其中一个时，所有其他元素也会向下移动。要修复它，将元素浮动到左侧以将它们保持在一行并与顶部对齐：

演示：https://jsfiddle.net/403zexop/

nav {
    width:100%;
    height:5rem;
    background:red;
}

ul {
    margin:0 auto;
    font-size:0;
    overflow: hidden;
    li {
        display:block;
        line-height:4.8rem;
        position:relative;
        float: left;

        >a{
            text-decoration:none;
            color:#FFF;
            font-family:"Verdana";
            padding:.1rem 1.5rem;
            font-size:1.3rem;
            display:block;
            overflow:hidden;
            position:relative;
            transition:300ms all;
            height:100%;
            margin:0;

            &::before,&::after{
                content:'';
                width:100%;
                position:absolute;
                left:0;
                transition:200ms all;
            }

            &::before{
                background:#FFF;
                height:.5rem;
                top:0;
                transform:translateY(-100%);
            }
            &::after{
                background:#000;
                height:.4rem;
                bottom:0;
                transform:translateY(100%);
            }
        }

        &::before{
            content:'';
            width:100%;
            height:100%;
            top:0;
            left:0;
            background:#CCC;
            position:absolute;
            opacity:0;
        }

        &:hover{
            >a{
                padding-top:0.6rem;
                padding-bottom:0.1rem;

                &::before,&::after{
                transform:translateY(0);
            }
        }

        &::before{
            opacity:0.3;
        }
    }
}

} 

注意：我通过将overflow: hidden; 添加到ul 来清除浮动

Answer 2

“li:hover > a”是正确的！

问题是，通过更改填充，您会改变元素的高度，并且父容器必须适应所有其他子容器。

当您不更改填充时，您可以看到它，而只是悬停 a 的背景颜色。你会看到，它只是改变了当前元素。