javascript - CSS3 过渡卡住

Question

我在我们的新网站上进行了很多转换。有一个特别是以前工作得很好，但自从添加 googlemaps 后，某个过渡效果不会触发。此外，它会禁用网站上的所有其他过渡效果，直到另一个 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>

如果删除 span，它不会再使所有过渡效果崩溃，但这确实会删除包含在 span 中的纯 CSS 工具提示。

那么为什么 span 会这样做，我们又该如何防止呢。

很棒

Answer 1

好吧，它是固定的。它似乎只需要将 position:absolute 特征添加到 span:hover 而不是 CSS 的跨度线。奇怪。

反复试验再次获胜的接缝。

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

非常感谢，