Javascript 悬停时设置侧菜单动画

我只想显示默认的图标，悬停时将侧菜单滑动到您在JSFIDLE中看到的当前状态

提前谢谢

---

您可以通过如下方式更改悬停时的导航栏值来实现：

#侧边栏{
字母间距：0.1米；
字号：500；
右边框：1px实心#7979；
填充顶部：50px；
位置：固定；
z指数：1000；
宽度：65px；
高度：100vh；
背景#2c2c；
过渡：1s；
}
#侧栏：悬停{
宽度：259px；
}
#侧栏：悬停。侧栏项目范围{
不透明度：1；
}
.侧边栏项{
填充：10px 20px；
左边框：5px实心透明；
}
.侧边栏项目跨度{
不透明度：0；
过渡：1s；
}
.侧边栏处于活动状态{
左边框：5px实心#b1a0ff；
颜色：#b1a0ff；
背景#4747；
}
.侧栏项目a{
对齐项目：居中；
}

---

因此，从评论来看，这并不完全是您想要的，但我将其放在一起，并不妨在这里分享

它使用相对位置和CSS转换在悬停时为标签设置动画。它确实涉及对HTML的一些更改

#侧边栏{
字母间距：0.1米；
字号：500；
右边框：1px实心#7979；
填充顶部：50px；
位置：固定；
z指数：1000；
宽度：259px；
高度：100vh；
背景#2c2c；
}
.侧边栏项{
填充顶部：20px；
}
.侧栏项目a{
对齐项目：居中；
}
.侧栏项目i{}
.侧边栏左盖{
背景#2c2c；
宽度：40px；
身高：100%；
z指数：2；
左侧填充：20px；
}
.侧边栏项.侧边栏标签{
位置：相对位置；
右：100px；
过渡：右0.5s；
z指数：1；
}
.侧栏项目：悬停.侧栏标签{
右：-5px；
显示：内联块；
}

不清楚你在说什么我希望侧菜单只显示像这样的图标，悬停时显示我发布的原始JSFIDLE两个FIDLE都是一样的可以再次检查吗？很明显我想要的，泰

<div id="sidebar">
    <div class="sidebar-wrapper">
        <div class="profile-menu d-flex flex-column flex-grow">
            <div class="sidebar-item">
                <a class="d-flex" href="/">
                    <i class="fa fa-lg fa-home" style="margin-left: 1px; margin-right: 20px"></i>
                    <span>Home</span>
                </a>
            </div>
            <div class="sidebar-item">
                <a class="d-flex" href="/profile">
                    <i class="fa fa-lg fa-user-o" style="margin-left: 1px; margin-right: 22px"></i>
                    <span>Profile</span>
                </a>
            </div>
            <div class="sidebar-item">
                <a class="d-flex" href="/profile/messages">
                    <i class="fa fa-lg fa-envelope-o" style="margin-right: 19px"></i>
                    <span>Messages</span>
                </a>
            </div>
        </div>
    </div>
</div>