gpt4 book ai didi

html - z-index 不适用于我的动画

转载 作者:搜寻专家 更新时间:2023-10-31 22:19:56 25 4
gpt4 key购买 nike

以下代码(html 和 css)让我抓狂…… jsfiddle link

如何使用 z-index(或其他任何东西)让 3 个圆圈始终可见。蓝色的没问题,但是黄色和红色的会隐藏左边的圆圈。

在此先感谢您的帮助!

<div id="rSociaux" class="col-md-6 noSpace">
<a href="http://www.facebook.com/lesdieuxduvin" target="_blank" id="bg-fb" class="tile-share">
<div class="social-color-bg fb"></div>
<svg class="ontop" height="100" width="100">
<circle cx="50" cy="50" r="20" fill="blue" />
</svg>
</a>
<a href="http://www.twitter.com/lesdieuxduvin" target="_blank" class="tile-share">
<div class="social-color-bg twitter"></div>
<svg class="ontop" height="100" width="100">
<circle cx="50" cy="50" r="20" fill="yellow" />
</svg>
</a>
<a href="http://www.twitter.com/lesdieuxduvin" target="_blank" id="bg-li" class="tile-share">
<div class="social-color-bg linkedin"></div>
<svg class="ontop" height="100" width="100">
<circle id="svgLi" cx="50" cy="50" r="20" fill="red" />
</svg>
</a>

CSS:

#rSociaux {
background-color: #a55fa2;
}

.ontop {
position: relative;
z-index: 10;
}

.tile-share {
display: inline-block;
position: relative;
left: 33%;
-webkit-transform: translateX(-50%) translateY(-0%);
-moz-transform: translateX(-50%) translateY(-0%);
-ms-transform: translateX(-50%) translateY(-0%);
-o-transform: translateX(-50%) translateY(-0%);
transform: translateX(-50%) translateY(-0%);
}

#rSociaux {
overflow: hidden;
}

#rSociaux svg {
position: relative;
z-index: 1000; }

#rSociaux .social-color-bg {
pointer-events: none;
position: absolute;
border-radius: 100%;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}

#rSociaux .social-color-bg.fb {
background: blue;
}

#rSociaux .social-color-bg.twitter {
background: yellow;
}

#rSociaux .social-color-bg.linkedin {
background: red;
}


#rSociaux .tile-share:hover .social-color-bg {
width: 100% !important;
height: 100% !important;
-webkit-transform: scale(20);
-moz-transform: scale(20);
-ms-transform: scale(20);
-o-transform: scale(20);
transform: scale(20);
}

最佳答案

添加以下内容:

#rSociaux .tile-share{
z-index:10;
}

#rSociaux .tile-share:hover{
z-index:9;
}

删除其他 z-index 引用可以解决问题

here is工作 fiddle

关于html - z-index 不适用于我的动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30791696/

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