如何让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滑入并悬停？

回答

相关问题