CSS悬停：显示Safari中的上一个元素

Question

我在文本悬停时显示我的HTML音频标记。我也使用过渡来实现淡入和淡出效果。它在除Safari之外的所有浏览器中都能正常工作。在safari中，如果我在无间隙内多次悬停，它也会显示前一个音频标签（在鼠标离开时不能看到）。以下是我的代码。请帮我解决问题。

.resourceTextBlock audio {
    width:100%;
    float:left;
    height:30px;
    top: -30px;
    position:relative;
    z-index: 1;
    opacity: 0.3;
    margin-bottom: -30px;
    transition: opacity 2s;
    -webkit-transition:opacity 2s;
    -webkit-transform 2s;
    -moz-transition: opacity 2s;
    -o-transition: opacity 2s;
    -ms-transition: opacity 2s;
}

.resourceTextBlock:hover audio{
    z-index: 121;
    opacity: 1;
    top: 1px;
}