CODEWITHSUNDEEP
htmlcss
user1953761
user1953761

Reputation: 3

Keep line-height of text when playing / pausing music player

I have the problem that I cant keep the song title text on line-height: 800px; when the user plays or pauses the player. I managed to do it on :hover though. This is seems to be a very tricky thing and really the first time im having such a difficult moment with css.

I would like to post a Jsfiddle but it really would require alot of code other than css so I will give you the link of the players so you can have an idea of whats going on:

http://tinyurl.com/agvmueo

Ok as you can see, the problem is that it looks really ugly with the text behind the circle progress bar. In conclusion, im trying to have the same css state for play/pausing of the player as when the user hovers over it (text and border radius).

Thank in advance

Upvotes: 0

Views: 58

Answers (1)

My Head Hurts
My Head Hurts

Reputation: 37675

You could use the adjacent sibling selector to achieve this, for example .ui360-vis .sm2_paused + a.sm2_link and .ui360-vis .sm2_playing + a.sm2_link.

So your CSS selector for setting the line-height, (line 48 in your 360player.css file), would become:

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

Upvotes: 1

Related Questions