悬停时的CSS过渡动画不会在Firefox

Question

我在菜单上工作，屏幕右侧会弹出四个图标。屏幕右侧显示一个箭头（东 - 出 - 图标），如果您将鼠标悬停在屏幕右侧，则会显示另外四个图标（交流图标） 这适用于除FireFox之外的所有浏览器。 有谁可以解决这个问题？

＆＃13;

＆＃13;

html {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
}

#east-exit {
  display: flex;
  opacity: 1;
  z-index: -1;
  align-items: stretch;
  justify-content: space-around;
  flex-direction: column;
  position: absolute;
  right: 0;
  height: 100%;
  width: 85px;
  font-size: 55px;
}

.east-exit-icon {
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -o-transition: all .2s ease;
  -ms-transition: all .2s ease;
  transition: all .2s ease;
  font-size: 45px;
  opacity: 0.1;
}

#east-exit:hover .east-exit-icon { opacity: 0; }

.communicate-icon {
  z-index: 1;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease;
  transition: all .3s ease;
  color: darkgrey;
  opacity: 0;
}

#east-exit:hover .communicate-icon { opacity: 1; }

.communicate-icon:hover,
.communicate-icon:focus,
.communicate-icon:active {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
  color: grey;
  cursor: pointer;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>

<div id="east-exit">
  <a><i class="communicate-icon fa fa-envelope"></i></a>
  <a><i class="communicate-icon fa fa-comments"></i></a>
  <i class="east-exit-icon fa fa-arrow-right"></i>
  <a><i class="communicate-icon fa fa-phone"></i></a>
  <a><i class="communicate-icon fa fa-camera"></i></a>
</div>

＆＃13;

＆＃13;

＆＃13;

修改：https://jsfiddle.net/grhajrbp/

Answer 1

只需移除＃east-exit

上的z-index: -1;即可

＆＃13;

＆＃13;

html {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
}

#east-exit {
  display: flex;
  opacity: 1;
  align-items: stretch;
  justify-content: space-around;
  flex-direction: column;
  position: absolute;
  right: 0;
  height: 100%;
  width: 85px;
  font-size: 55px;
}

.east-exit-icon {
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -o-transition: all .2s ease;
  -ms-transition: all .2s ease;
  transition: all .2s ease;
  font-size: 45px;
  opacity: 0.1;
}

#east-exit:hover .east-exit-icon { opacity: 0; }

.communicate-icon {
  z-index: 1;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease;
  transition: all .3s ease;
  color: darkgrey;
  opacity: 0;
}

#east-exit:hover .communicate-icon { opacity: 1; }

.communicate-icon:hover,
.communicate-icon:focus,
.communicate-icon:active {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
  color: grey;
  cursor: pointer;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>

<div id="east-exit">
  <a><i class="communicate-icon fa fa-envelope"></i></a>
  <a><i class="communicate-icon fa fa-comments"></i></a>
  <i class="east-exit-icon fa fa-arrow-right"></i>
  <a><i class="communicate-icon fa fa-phone"></i></a>
  <a><i class="communicate-icon fa fa-camera"></i></a>
</div>

＆＃13;

＆＃13;

＆＃13;