Darsh Darsh - 6 months ago 17
HTML Question

Move an element by clicking on a link with pure CSS

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>

Answer

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/

Comments