我们的新网站上正在进行很多转换。有一个特别之前工作得很好，但自从添加谷歌地图后，某种过渡效果不会触发。此外，它还会禁用网站上的所有其他过渡效果，直到触发另一个 javascript 函数。
我不知道为什么，但这些就是事实。该问题似乎仅限于 SAFARI，并没有出现在 Chrome 中。这是效果。任何人都可以明白为什么它会这样做。
#coursepack .rightcol .players a img {
width:26px;
height:26px;
border:1px solid #FFF;
margin-right:3px;
margin-top:10px;
position:relative;
float:left;
-webkit-transition:top, 500ms;
-moz-transition:top, 500ms;
}
#coursepack .rightcol .players a:hover img {
border:1px solid #3CF;
top:-12px;
}
#coursepack .rightcol .players a {
background:none;
position:relative;
width:31px;
height:36px;
overflow:visible;
float:left;
}
#coursepack .rightcol .players a:hover {
}
#coursepack .rightcol .players a span {
font-family:"Helvetica Neue", "Myriad Pro", Arial;
font-size:11px;
background-color:#222;
border-radius:6px;
-moz-border-radius:6px;
opacity:0;
padding:6px;
color:#FFF;
position:absolute;
width:90px;
top:0px;
left:-34px;
text-align:center;
-webkit-transition-property:all;
-webkit-transition-duration:500ms;
visibility:hidden;
text-decoration:none;
}
#coursepack .rightcol .players a:hover span {
opacity:0.8;
top:40px;
visibility:visible;
}
奇妙
编辑，我现在已经确定确切的问题在于链接内部。链接设置如下：
<a href=""><img src=""><span>Crazy Paul</span></a>
如果删除跨度，它不会再使所有过渡效果崩溃，但这确实会删除纯 CSS 工具提示，因为它包含在跨度内。
那么为什么跨度会这样做以及我们如何防止它呢？
奇妙
好吧，它是固定的。看起来所需要的只是将position:absolute 特性添加到span:hover 而不是CSS 的span 线。奇怪的。
反复试验再次取得了胜利。
#coursepack .rightcol .players a span {
font-family:"Helvetica Neue", "Myriad Pro", Arial;
font-size:11px;
background-color:#222;
border-radius:6px;
-moz-border-radius:6px;
opacity:0;
padding:6px;
color:#FFF;
top:0px;
left:-34px;
text-align:center;
visibility:hidden;
text-decoration:none;
-webkit-transition-property:all;
-webkit-transition-duration:500ms;
}
#coursepack .rightcol .players a:hover span {
opacity:0.8;
top:40px;
visibility:visible;
position:absolute;
width:90px;
}
非常感谢，
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
