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

我在文本的悬停处显示我的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;
}

---

我们需要结合使用HTML/CSS。您可以制作一个JSFIDLE或Codepen示例。我对JSFIDLE或Codeopen不太熟悉。当然，我会浏览这些文档并尽快通过其中一个更新我的html。谢谢你的快速回复。