播放/暂停音乐播放器时保持文字行高

Question

我有一个问题，我不能保持歌曲标题文本在line-height: 800px;当用户播放或暂停播放器。不过我是在悬停状态下完成的。这似乎是一个非常棘手的事情，真的是我第一次有这样的困难时刻与css。

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

http://tinyurl.com/agvmueo

好的，正如你所看到的，问题是圆圈进度条后面的文本看起来真的很难看。总而言之，我试图让播放器的播放/暂停状态与用户悬停在其上时(文本和边框半径)具有相同的css状态。

提前致谢

Answer 1

您可以使用相邻的兄弟选择器来实现这一点，例如.ui360-vis .sm2_paused + a.sm2_link和.ui360-vis .sm2_playing + a.sm2_link。

所以你的CSS选择器设置line-height， (第48行在你的360player.css文件)，将变成:

.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;
}