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/

单击具有纯CSS的链接移动元素

1 个答案: