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 CSS Selectors Advanced Selectors :root and :target

Jacob Bender
Jacob Bender
15,300 Points
Posted by Jacob Bender
Jacob Bender
15,300 Points

Combine :hover and :target to activate without clicking

Just a thought I had... Is there a way in css, without using javascript or such, to trigger the :target code like in the example when you simply hover over the link it is paired with? I googled and couldn't find anything, but I know you can combine/chain some selectors.

Thanks.

2 Answers

Rasmus Rønholt
Rasmus Rønholt
Courses Plus Student 17,358 Points

No, not really - the only element that changes state when hovering is the element you hover. In the video, the page loades with different urls when the links are clicked - and that is what sets the target.

As far as I know, the only way to do something similar would be to structure your html so that the paired elements are somehow related (and can be separated from the other pairs). That way you could do something like a:hover + div {} which would select the next immediate sibling to the hovered link. But that practically never makes sense in the scenario you are referring to. It could, however, make sense if you wanted to show an icon next to the link.

Html and css are not really programming languages, and while css3 begin to introduce concepts of variables, you can't dynamically set those based on events like a mouse hover. So you should go with js and accept that if js is not enabled it won't work :)

Jacob Bender
Jacob Bender
15,300 Points
Jacob Bender
Jacob Bender
15,300 Points

I figured. I was hoping for some css voodoo I didn't know about. I knew it was possible with JS. You are right though, real world application for this nonsense is close to nil. I am one of those "I wonder if I can" rather then "I probably should do it the "right" way" types. Thanks for your response :)

Rasmus Rønholt
Rasmus Rønholt
Courses Plus Student 17,358 Points

Haha - I do that too... I'm not saying that it couldn't be useful in the real world, though. It's just that htmll/css is markup/styling only. Anything event related still requires js.