通过单击带有纯CSS的链接移动元素

Question

是否有可能由另一个元素影响一个元素？当我单击链接.box时，我想移动a.link元素。

我试过了，但没能成功。我应该在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 1

使用兄弟/子选择器是可能的。选择器必须包含要对其采取行动的元素。

单击.link时，希望.box移动。它们是相邻的，所以您可以使用相邻的同胞选择器.link:active + .box。

您可以使用转换来动画移动。

请参阅：http://jsfiddle.net/2P4aA/2/