Jud Jud - 7 months ago 9
HTML Question

Targeting an individual iframe with CSS

On my tumblr blog here: http://ukgraffiti.tumblr.com/ I've used:

iframe {opacity:0}
iframe:hover {opacity:1}


to hide the tumblr control buttons (Follow, Dashboard) so that they only show up when a user hovers over them.

Unfortunately other elements get affected in the same way. If, for instance, I post a song to my blog, the little player widget is hidden in the same way. Also, posts can be opened for answers, which results in a little answer form below the post. This is also affected by the ifram opacity setting.

Would it be possible to target ONLY the tumblr buttons with the opacity ruling?

Thanks in advance.

Jud Jud
Answer

Just in case any fellow tumblr users are interested, the answer is:

.tmblr-iframe:nth-of-type(1) { opacity:0; }
.tmblr-iframe:hover { opacity:1 !important; }

Thanks to all who tried to help me on this.