Question

我不知道为什么这个navicon（从https://codepen.io/bennettfeely/pen/twbyA复制）完全正常工作，除了中间线不可点击。

我必须为页面设置一个z-index，所以我认为可能就是这样，但即使我删除了所有z索引，我仍然无法点击中间行。我不确定甚至可以寻找什么可能导致这样的行为，所以任何可以帮助我理解导致这种情况的指针都将非常感激！

标记：

    <div class="top-bar-right float-right navicon-button-wrapper">
        <a class="navicon-button x" id="navicon-button">
          <div class="navicon"></div>
        </a>
    </div>

SCC：

$duration: .5s;

$size : 100%;
$toggled-size : .75;

$bg : #274380;
$nav-bg  : #000;
$content-bg : #FFF;

.navicon-button {
  display: inline-block;
  position: relative;
  padding: 2.0625rem 1.5rem;
  transition: $duration/2;
  cursor: pointer;
  user-select: none;
  opacity: .8;

  .navicon:before, .navicon:after {
    transition: $duration/2;
  }

  &:hover {
    transition: $duration;
    opacity: 1;

    .navicon:before, .navicon:after {
      transition: $duration/2;
    }

    .navicon:before { top: .825rem; }
    .navicon:after { top: -.825rem; }
  }
}

.navicon {
  position: relative;
  width: 2.5em;
  height: .3125rem;
  background: $content-bg;
  transition: $duration;
  border-radius: 2.5rem;

  &:before, &:after {
    display: block;
    content: "";
    height: .3125rem;
    width: 2.5rem;
    background: $content-bg;
    position: absolute;
    z-index: -1;
    transition: $duration $duration/2;
    border-radius: 1rem;
  }

  &:before { top: .625rem; }
  &:after { top: -.625rem; }
}

.open:not(.steps) .navicon:before,
.open:not(.steps) .navicon:after {
  top: 0 !important;
}

.open .navicon:before,
.open .navicon:after {
  transition: $duration;
}

/* × and + */
.open.plus,
.open.x {
  .navicon {
    background: transparent;

    &:before { transform: rotate(-45deg); }
    &:after { transform: rotate(45deg); }
  }
}
.open.plus { 
  transform: scale($toggled-size) rotate(45deg) 
}

.navicon-button-wrapper
{
display: flex;
  justify-content: space-between;
  // height: 4.5rem;
  // background: $nav-bg;
  // text-align: right;
  // border-radius: .5rem .5rem 0 0;
  // padding: 0 1rem;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

Navicon Transformicons - 中线不可点击

0 个答案: