gpt4 book ai didi

悬停时的 CSS 过渡动画在 Firefox 中不起作用

转载 作者:行者123 更新时间:2023-11-28 09:58:16 24 4
gpt4 key购买 nike

我正在制作一个带有四个图标的菜单,该菜单会在屏幕右侧弹出。屏幕右侧显示一个箭头(east-exit-icon),如果将鼠标悬停在它上面,它会显示其他四个图标(communicate-icon)这适用于除 FireFox 之外的所有浏览器。谁能解决这个问题?

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

编辑:https://jsfiddle.net/grhajrbp/

最佳答案

只需在 #east-exit 上删除您的 z-index: -1;

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

关于悬停时的 CSS 过渡动画在 Firefox 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36599239/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com