如何讓li滑入並懸停？

我如何讓李的滑入/滑出？我試圖添加到李負左值，然後將懸停設置爲零，但它不適用於我。如何讓li滑入並懸停？

這是我的代碼：

HTML

<nav class="menu"> 
     <ul> 
      <li class="active"><a href="#">EN</a></li> 
      <li><a href="#">LV</a></li> 
      <li><a href="#">RU</a></li> 
     </ul> 
    </nav>

CSS

.menu ul { 
    list-style-type: none; 
    float: left; 
    display:; 
} 

.menu li { 
    visibility:hidden; 
    opacity:0; 
    transition:opacity 0.6s linear; 
    display: inline-block; 
} 

.menu li:first-child { 
    visibility:visible; 
    opacity:1; 
} 

.menu ul:hover > li { 
    visibility:visible; 
    opacity:1; 
} 

.menu a { 
    text-decoration: none; 
} 

.menu a:hover { 
    color:red; 
}

JSFIDDLE

來源

2017-06-15 Viktor

這你腦子裏有什麼？利用transform：https://jsfiddle.net/2u8dt4s2/

來源

2017-06-15 13:08:00 SamHH

是的，謝謝你正是我想要的，還有一個問題，李元素顯示我是否在他們附近盤旋，但其實際應該出現在盤旋在李元素之後。 – Viktor

您需要檢查元素並檢查元素如何呈現。例如，只要'ul'被徘徊，您就會徘徊，其中包含所有'li'子女以及左側的一些填充。 – SamHH

感謝您的幫助 – Viktor

如何讓li滑入並懸停？

回答

相關問題