Move an element by clicking on a link with pure CSS

Question

Is it possible to affect one element by another element? I want to move .box element when I click on the link a.link.

I tried this, But couldn't get it to work. What should I write at link:active?

<html>
<head>
<style>

.box
{
    height:100px;
    width:200px;
    border:solid red 5px;   
}

.link:hover
{
    color:red;
}

.link:active
 {
    color:grey;
 }
</style>
</head>

<body>
   <a href="#" class=link >CLICK ME</a>
   <div class=box></div>
</body>
</html>

The title is quiet different from the actual question. it may cause misconception. Please edit the title to indicate the issue better. However, you could find your answer here: http://stackoverflow.com/questions/21919044/css3-transition-on-click-using-pure-css/21919261#21919261 Check the 2nd method. — Hashem Qolami, Feb 24 '14 at 20:53
Your question is poorly worded, and I don't understand it well enough to edit it. Could you revise your question so it makes more sense? Perhaps using language from the answers you found? — Tyler Eich, Feb 24 '14 at 21:11

score 0 · Accepted Answer · answered Feb 24 '14 at 21:02

It's possible using sibling/child selectors. The selector has to include the element you're taking action on.

When you click on .link, you want .box to move. They're next to each other, so you can use the adjacent sibling selector .link:active + .box.

You can use transitions to animate the movement.

see: http://jsfiddle.net/2P4aA/2/

Move an element by clicking on a link with pure CSS

1 Answers1