Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Garyn Jones
Garyn Jones
2,663 Points

Pseudo Class Problem

I'm trying to set a video so that the opacity changes after clicked. Why is it that the pseudo classes :hover and :active will work on my css class but none of the others (:focus, :visited, :link) won't. I'm not advanced enough for Java yet. Is there a solution within CSS?

Well, as far as I recall, those classes are for links

You want to video player to lose opacity after clicking? Is that it?

Garyn Jones
Garyn Jones
2,663 Points

I figured as much. Opposite. I want the video player to be completely transparent except for a "play" button I set up separate from the player so that all you see is the background of the page and the play button. Then, when the play button is clicked the video appears.

2 Answers

Okay, since you have your video player with 0 opacity and want it to go to opacity 1 when someone clicks the play button, which is a separate element, you should use javascript.

Let me give you an example.

<script>
var playButton = document.getElementsByClassName("playButton");
var player = document.getElementsByClassName("player");
playButton.onclick = function(){
    player.setAttribute('class','active');
}
</script>

First you set a variable with the play button class name. Then you set a variable with the player class name. Then you add a different class to the player when you click on the playbutton.

Then on your css you can say that .player.active {opacity:1} And you can even add cool transition to .player class.

Hope this helps.

Garyn Jones
Garyn Jones
2,663 Points

Thanks I'll give it a shot!