在悬停时动画侧面菜单

Question

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

提前致谢

https://jsfiddle.net/aq9Laaew/228/

<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>

Answer 1

您可以通过更改悬停时的导航栏值来执行此操作：

    #sidebar {
        letter-spacing: 0.1em;
        font-weight: 500;
        border-right: 1px solid #797979;
        padding-top: 50px;
        position: fixed;
        z-index: 1000;
        width: 65px;
        height: 100vh;
        background: #2c2c2c;
        transition:1s;
    }
    #sidebar:hover{
      width: 259px;
    }
    #sidebar:hover .sidebar-item span{
      opacity:1;
    }
    .sidebar-item {
        padding: 10px 20px;
        border-left: 5px solid transparent;
    }
    .sidebar-item span{
      opacity:0;
      transition:1s;
    }
    .sidebar-active {
        border-left: 5px solid #b1a0ff;
        color: #b1a0ff;
        background: #474747;
    }
    .sidebar-item a {
        align-items: center;
    }

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <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>

Answer 2

所以从评论来看，这并不完全是你所追求的，但我把它放在一起，无论如何都可能在这里分享。

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

https://jsfiddle.net/Chipmo/111dd0sj/1/

#sidebar {
  letter-spacing: 0.1em;
  font-weight: 500;
  border-right: 1px solid #797979;
  padding-top: 50px;
  position: fixed;
  z-index: 1000;
  width: 259px;
  height: 100vh;
  background: #2c2c2c;
}

.sidebar-item {
  padding-top: 20px;
}

.sidebar-item a {
  align-items: center;
}

.sidebar-item i {}

.sidebar-left-cover {
  background: #2c2c2c;
  width: 40px;
  height: 100%;
  z-index: 2;
  padding-left: 20px;
}

.sidebar-item .sidebar-label {
  position: relative;
  right: 100px;
  transition: right 0.5s;
  z-index: 1;
}

.sidebar-item:hover .sidebar-label {
  right: -5px;
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<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="/">
          <div class="sidebar-left-cover">

            <i class="fa fa-lg fa-home" style="margin-left: 1px; margin-right: 20px"></i></div>
          <span class="sidebar-label">Home</span>
        </a>
      </div>
      <div class="sidebar-item">
        <a class="d-flex" href="/profile">
          <div class="sidebar-left-cover">

            <i class="fa fa-lg fa-user-o" style="margin-left: 1px; margin-right: 22px"></i>
          </div>
          <span class="sidebar-label">Profile</span>
        </a>
      </div>
      <div class="sidebar-item">
        <a class="d-flex" href="/profile/messages">
          <div class="sidebar-left-cover">

            <i class="fa fa-lg fa-envelope-o" style="margin-right: 19px"></i></div>
          <span class="sidebar-label">Messages</span>
        </a>
      </div>
    </div>
  </div>
</div>