抱歉，我知道这可能是一个重复的帖子 - 但我很绝望！我正在尝试为 laytheme / wordpress 网站设计 HTML5 音频播放器，但被一些不必要的悬停状态卡住了......

抱歉，我知道这可能是一个有点重复的帖子 - 但我很绝望！

我正在尝试为 laytheme / wordpress 网站设计 HTML5 音频播放器的样式，但却遇到了一些不必要的悬停样式。

我无法确定鼠标悬停在播放器上时导致显示图层的原因。理想情况下，我只希望这是一个播放按钮。由于这是 Wordpress 的 Laytheme，因此我能实现的功能有些受限 - 我无法从头开始构建任何东西，因此只能编辑 CSS。

当鼠标悬停在播放按钮上时，会出现半透明的背景，而鼠标悬停在右侧时也会出现另一个元素 - 我不知道那是什么，我认为它一定是音量滑块或菜单，因为它们是完整播放器上仅有的两个具有半透明背景的元素。

任何帮助都将不胜感激。代码有点混乱 - 我正在努力并希望！

这有所有的 CSS 标签， 但我不能确定

.audio-music-page::-webkit-media-controls-timeline {
    display: none !important;
}

.audio-music-page::-webkit-media-controls-time-remaining-display {
    display: none !important;
    background-color: transparent !important;
}

.audio-music-page::-webkit-media-controls-mute-button { 
    display: none !important; 
    background-color: transparent !important;
}

.audio-music-page::-webkit-media-controls-volume-slider { 
    display: none !important;
    background-color: transparent !important;
}

.audio-music-page::-webkit-media-controls-current-time-display { 
    display: none !important; 
    background-color: transparent !important;
}

.audio-music-page::-webkit-media-controls-volume-slider-container {
    display: none !important; 
    background-color: transparent !important;
}

.audio-music-page::-webkit-media-controls-enclosure {
    background-color: transparent !important; 
}

.audio-music-page::-webkit-media-controls-panel {
    background-color: transparent;
}


.audio-music-page {
  width: 100px;
  height: 25px;
    margin: auto;
    display: block;
}

我尝试过让内容不显示或背景颜色透明，但我得到的最接近的结果是这样的。鼠标悬停在播放按钮上时，您仍然可以看到透明背景和权限背景元素（可能是菜单）。

事实上我很确定这是菜单，好像我减少了元素的宽度，播放按钮被推到了左边，我可以再次看到菜单项，尽管它在 HTML 本身中被关闭了... 菜单

以下是我的音频播放器现在的样子。 播放按钮 其他元素

这是该问题的代码笔草图，令人恼火的是它无法复制，所以可能是 laytheme 的问题。

codepen.io/usefulpattern/pen/yLdZXmV