使用转换触发多个 div答案

【问题标题】：Triggering multiple divs with transition使用转换触发多个 div
【发布时间】：2013-04-26 02:48:57
【问题描述】：

我确定我在这个话题上很愚蠢.. 但是有没有办法通过一次转换触发 2 个或更多 div？例如.. 我有 2 个盒子.. 当我单击一个盒子时，我希望两个盒子的宽度和高度都更改为 400px。如果可能的话，我想把它保存在 HTML 和 CSS 中。如果没有。还有其他选择吗？谢谢！

<!DOCTYPE html>

<html>
<head>
<style>

    .box1{
        width:200px;
        height:200px;
        background-color:red;
    }

    .box2{
        width:200px;
        height:200px;
        background-color:black;
    }


</style>
</head>

<body>

<div class="box1"></div>
<div class="box2"></div>

</body>
</html>

【问题讨论】：

欢迎来到 Stack Overflow！尽管您确实描述了您的问题，但非常感谢能够看到一些代码。考虑添加一些代码，以便您的问题具有更高的价值
你尝试过什么吗？如果是，您可以发布一些代码吗？
嘿抱歉..这是一些代码。

标签： html css css-transitions transitions

【解决方案1】：

HTML：

<div class="box"></div>
<div class="box"></div>

这是您需要的 CSS：

.box {
  width:100px;
  height:100px;
  background:red;
  display:inline-block;
}

.active {
  width:200px;
  height:200px;
  transition: height 1s linear, width 1s linear;
}

jsfiddle：http://jsfiddle.net/mYJVn/2/

单击其中一个框会增加两个框的大小。

如果你根本不想使用任何 JS，你将不得不依赖滥用“checkbox hack”。

HTML：

<label for="toggle">
<input type="checkbox" id="toggle">
<div class="box"></div> 
<div class="box"></div>
</label>

CSS：

.box {
    width:100px;
    height:100px;
    background:red;
    display:inline-block;
    transition:  all 1s linear;
}

input[type=checkbox] {
    display:none;
}

input[type=checkbox]:checked ~ .box{
    width:200px;
    height:200px;
}
label {
    display: block;
}

jsfiddle：http://jsfiddle.net/mYJVn/4/

【讨论】：

不错！我应该提到如果可能的话，我更愿意将其保留在 html 和 CSS 中。
编辑了我的答案以包含非 JS 解决方案。虽然这确实是对 CSS 的滥用，但它可以在没有 javascript 的情况下工作。