调整悬停第一个和第二个孩子的范围

Question

我想要做的是我的菜单图标我希望顶部和中间跨度移动到指定的宽度，当从左向右移动过渡时。 我不想使用javascript所以我试图用css完成它，当我将所有跨度移动到一个尺寸时。

＆＃13;

＆＃13;

.menu-btn {
  width: 28px;
  position: absolute;
  left: 30px;
  height: 23px;
  top: 17px;
  display: block;
}

.menu-btn a {
  display: block;
}

.menu-btn span {
  display: block;
  height: 2px;
  background: #000;
  margin: 6px 0px;
}

.menu-btn:hover .menu-sandwhich:first-child {
  width: 17px;
}

.menu-btn:hover .menu-sandwhich:second-child {
  width: 23px;
}

＆＃13;

<a href="" class="menu-btn">
  <span class="menu-sandwhich">
    	 <span></span>
        <span></span>
        <span></span>
  </span>
</a>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要更正这样的代码：

＆＃13;

＆＃13;

.menu-btn {
  width: 28px;
  position: absolute;
  left: 30px;
  height: 23px;
  top: 17px;
  display: block;
}

/*
not needed 
.menu-btn a {
  display: block;
}
*/
.menu-btn span {
  display: block;
  height: 2px;
  background: #000;
  margin: 6px 0px;
  margin-left:auto; /*so the shrink from left to right*/
  width: 100%;/*you need initial value*/
  transition: 1s all;/*Add this for transition*/
}


/* You need to apply to span the first-child*/
.menu-btn:hover .menu-sandwhich span:first-child {
  width: 17px;
}

.menu-btn:hover .menu-sandwhich span:nth-child(2) {/*there is no second-child*/
  width: 23px;
}

＆＃13;

<a href="" class="menu-btn">
  <!-- use div to avoid conflict with CSS you apply to the span -->
  <div class="menu-sandwhich">
    <span></span>
    <span></span>
    <span></span>
  </div>
</a>

＆＃13;

＆＃13;

＆＃13;

顺便说一句，这是使用较少代码重新创建布局的更好方法：

＆＃13;

＆＃13;

.menu-btn {
  width: 28px;
  position: absolute;
  left: 30px;
  height: 20px;
  top: 17px;
  display: block;
  background-image:
    linear-gradient(#000,#000),
    linear-gradient(#000,#000),
    linear-gradient(#000,#000);
  background-size:100% 2px;
  background-position:
     100% 0,
     100% 50%,
     100% 100%;
  background-repeat:no-repeat;
  transition:0.5s;
}

.menu-btn:hover {
  background-size:
    50% 2px,
    80% 2px,
    100% 2px;
}

＆＃13;

<a href="#" class="menu-btn">

</a>

＆＃13;

＆＃13;

＆＃13;