2

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

1 回答 1

2

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/

于 2013-05-02T02:58:54.203 回答