html - 播放/暂停音乐播放器时保持文本行高

Question

我的问题是我无法将歌曲标题文本保持在 line-height: 800px;当用户播放或暂停播放器时。我设法在 :hover 上做到了。这似乎是一件非常棘手的事情，这真的是我第一次遇到 CSS 如此困难的时刻。

我想发布一个 Jsfiddle，但它确实需要很多代码而不是 css，所以我会给你播放器的链接，这样你就可以了解发生了什么:

http://tinyurl.com/agvmueo

好的，如您所见，问题是圆形进度条后面的文字看起来真的很难看。总之，我试图为播放器的播放/暂停设置与用户将鼠标悬停在播放器上时相同的 css 状态(文本和边框半径)。

提前致谢

Answer 1

您可以使用 adjacent sibling selector要实现这一点，例如 .ui360-vis .sm2_paused + a.sm2_link 和 .ui360-vis .sm2_playing + a.sm2_link。

因此，用于设置 line-height 的 CSS 选择器(360player.css 文件中的第 48 行)将变为:

.sm2-inline-list .ui360-vis:hover a.sm2_link, 
.sm2-inline-list .ui360-vis .sm2_paused + a.sm2_link,
.sm2-inline-list .ui360-vis .sm2_playing + a.sm2_link {
    line-height: 800px;
}