Question

我确定我对这个话题感到愚蠢..但是有没有办法通过一次转换触发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>

Answer 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，则必须依赖滥用“复选框黑客”。

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/

通过转换触发多个div

1 个答案: