过渡&悬停是重叠的/覆盖的，如何修复？
过渡&悬停是重叠的/覆盖的，如何修复？
提问于 2018-12-12 11:22:26
我正在做一个配音板，我偶然发现了一个问题。我在设计纽扣，下面是它的外观.当你在按钮上盘旋时，行星应该：
- 绕它的轴旋转(工作的)
- 使行星结构饱和(这是可行的)
- 淡出顶部的数字图像，并以与行星相反的方式旋转(起作用)
- 在底部的数字图像中淡入，并以与行星相反的方式旋转(在上完全不能工作)
这里有3张该网站的图片：
这里是CSS (按钮=行星，数字=顶部数字图像，数字下方=底部数字图像)：
.button {
position: absolute;
width: calc(80% - 8px);
height: calc(80% - 8px);
background: white;
border-radius: 200px;
top: 10%;
left: 10%;
text-align: center;
border: 4px solid white;
box-shadow:0px 0px 15px 8px black;
transition: transform 300s, filter 2s;
transform: rotate(0deg);
}
.button:hover {
transform: rotate(6200deg);
filter: saturate(600%);
}
.number {
transition: transform 300s, opacity 2s;
transform: rotate(0deg);
opacity: 1;
position: absolute;
z-index: 2;
left: 0;
}
.number:hover {
transform: rotate(-6200deg);
opacity: 0;
}
.number-under {
position: relative;
left: 0;
z-index:1;
opacity: 0;
transform: rotate(0deg);
transition: transform 300s;
}
.number-under:hover {
opacity: 1;
transform: rotate(-6200deg);
}(这里是HTML)(它没有出现在我的演示文本中，所以我希望它会在我发布这篇文章时出现。)我将添加一个图像，以确保)：
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-12-13 10:00:13
我找到了解决方案，我更改了一些CSS：
.number-under {
position: absolute;
left: 0;
z-index: 1;
opacity: 0;
transform: rotate(0deg);
transition: transform 300s, opacity 2s;
}
.number:hover ~ .number-under {
opacity: 1;
transform: rotate(-6200deg);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53741968
复制相关文章
相似问题
腾讯云开发者
