li：hover>影響を与える他のリスト項目

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セレクタではありません。のdisplay-blockです。 inline-blockの要素がベースライン上に整列している場合は、padding-topをそのうちの1つに追加すると、他の要素もすべて下方向に移動することを意味します。解決するためには、1行にそれらを保つために左に要素をフロートしてトップに整列：

デモ：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; 
     } 
    } 
} 

} 

注：私はul

Answer 2

に overflow: hidden;を追加することにより、フロートをクリア

"li：ホバー>"正しいです！

問題は、パディングを変更すると、要素の高さが変更され、親コンテナは他のすべての子にも適応する必要があるということです。

パディングを変更していないときに表示されますが、ホバリングされたaの背景色だけが表示されます。あなたは、それが現在の要素を変更していることがわかります。