抱歉,我知道这可能是一个重复的帖子 - 但我很绝望!我正在尝试为 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
HTML5 音频播放器悬停问题样式
下载声明:
本站所有软件和资料均为软件作者提供或网友推荐发布而来,仅供学习和研究使用,不得用于任何商业用途。如本站不慎侵犯你的版权请联系我,我将及时处理,并撤下相关内容!