调整悬停第一个和第二个孩子的跨度 [英] resizing span on hover first and second child

问题描述

我想做的是我的菜单图标，我希望顶部和中间范围移动到从左向右过渡缩小悬停时的指定宽度. 我不想使用javascript，因此当我将所有跨度都移至一个大小时，我会尝试使用css来实现它.

What I am trying to do is my menu icon I want the top and mid span to move to the width specified when hovering with transition shrink from left to right. I dont want to use javascript so i am trying to accomplish it using css when i hover all the spans move to one size.

.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;
}

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

推荐答案

您需要像这样更正您的代码:

You need to correct your code like this:

.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;
}

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

顺便说一下，这是一种用更少的代码重新创建布局的更好的方法:

By the way, here is a better way to re-create your layout with less of code:

.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;
}

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

</a>

这篇关于调整悬停第一个和第二个孩子的跨度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！