通过单击带有纯 CSS 的链接来移动元素 [重复]答案

【问题标题】：Move an element by clicking on a link with pure CSS [duplicate]通过单击带有纯 CSS 的链接来移动元素 [重复]
【发布时间】：2025-12-28 06:10:07
【问题描述】：

是否可以通过另一个元素影响一个元素？当我点击链接a.link时，我想移动.box元素。

我试过这个，但无法让它工作。我应该在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>

【问题讨论】：

标题与实际问题完全不同。可能会引起误解。请编辑标题以更好地指出问题。但是，您可以在这里找到答案：*.com/questions/21919044/… 检查第二种方法。
非常感谢！我找到了我需要的东西！
你的问题措辞不好，我理解得不够好，无法编辑它。你能修改你的问题，让它更有意义吗？也许使用您找到的答案中的语言？

标签： html css css-transitions

【解决方案1】：

可以使用兄弟/子选择器。选择器必须包含您正在对其执行操作的元素。

当您单击.link 时，您希望.box 移动。它们彼此相邻，因此您可以使用相邻兄弟选择器.link:active + .box。

您可以使用过渡来为运动设置动画。

见：http://jsfiddle.net/2P4aA/2/

【讨论】：