Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Garyn Jones
Garyn Jones
2,663 Points
Posted by 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?

Fernando Claussen
Fernando Claussen
9,324 Points

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
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

Fernando Claussen
Fernando Claussen
9,324 Points

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
Garyn Jones
Garyn Jones
2,663 Points

Thanks I'll give it a shot!