我的侧面导航无法按预期工作。
代码应该做什么
仅在未悬停时显示图标。
悬停时，一次显示一个字母，直到整个链接可见。
当悬停状态不再处于事件状态时，链接应一次消失一个字母，不再可见。
不过，我只需添加 overflow-x 属性即可得到我想要的结果，但它不起作用。
发生了什么
链接显示在图标下方，直到导航的宽度足够宽以使链接正确地与图标位于同一行。
当悬停状态不再处于事件状态时，链接立即消失。
nav {
background-color: #f5f5f5;
}
nav a {
text-decoration: none;
color: black;
}
.side-nav {
position: fixed;
top: 54px;
left: 0;
bottom: 0;
width: 5%;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: width 2s;
}
.side-nav>.side-nav-top {
display: flex;
flex-direction: column;
}
.side-nav>.side-nav-top>a>span:first-child {
display: inline-block;
margin: 5px 20px 5px 20px;
width: 20px;
}
.side-nav i {
color: #909090;
}
.side-nav:hover {
width: 40%;
}
.hide {
overflow-x: hidden;
display: none;
}
.side-nav:hover .hide {
display: inline;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Home</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.dev.js"></script>
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="/css/index.css">
</head>
<body>
<nav class="side-nav">
<div class="side-nav-top">
<a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
<a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
<a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
<a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
<a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
<a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
<a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
<a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
<a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
<a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
</div>
</nav>
</body>
</html>最佳答案
制作 .side-nav > .side-nav-top > a 一个 flexbox (以防止链接文本在图标下方换行)并添加 white -space: nowrap 防止链接文本的文本换行。
现在，您可以将 overflow:hidden 添加到 side-nav 本身，而不是切换菜单文本的显示 - 请参阅下面的演示:
nav {
background-color: #f5f5f5;
}
nav a {
text-decoration: none;
color: black;
}
.side-nav {
position: fixed;
top: 54px;
left: 0;
bottom: 0;
width: 3.5rem; /* percentage might not be a good idea here */
display: flex;
flex-direction: column;
justify-content: space-between;
transition: width 2s;
overflow: hidden; /* added overflow here*/
}
.side-nav > .side-nav-top > a { /* made a flexbox */
display: flex;
align-items: center; /* aligns the icon and link text vertically */
white-space: nowrap; /* prevent text wrapping */
}
.side-nav>.side-nav-top {
display: flex;
flex-direction: column;
}
.side-nav>.side-nav-top>a>span:first-child {
margin: 5px 20px 5px 20px;
}
.side-nav i {
color: #909090;
}
.side-nav:hover {
width: 40%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.dev.js"></script>
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<nav class="side-nav">
<div class="side-nav-top">
<a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
<a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
<a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
<a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
<a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
<a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
<a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
<a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
<a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
<a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
</div>
</nav>关于html - 可悬停的侧面导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55320481/