6

我目前正在开发一个使用 :checked 变量将规则应用于 CSS 的站点。我有一个复选框输入，当被触发时，应该完成两件事。它应该做的第一件事是在选中时将 div 从 0 的高度扩展到 200，并在未选中时返回 0。我触发第一个任务没有问题。选中该框后应该完成的第二件事是变换：旋转（45deg）一个带有“ +”的div ，它应该旋转45度变成“ x ”（不是实际的x，而是旋转的+ ）。

我目前已经将代码设置为在 :hover 上显示动画，但这仅用于说明目的，不会出现在我的最终代码中。因此，将鼠标悬停在“ + ”上以查看我要使用 :checked 输入来完成什么。

如果您愿意看一下我的代码，并告诉我我做错了什么，我将不胜感激！如果您有任何问题，请告诉我。

注意：理想情况下，我正在寻找一个不需要 JS 的纯 CSS 解决方案。让我知道这是否不可能。

这是我的代码笔。

4

2 回答 2

8

前几天我在这里写了一个类似的解决方案。

基本上，您在使用该:checked方法时受到限制。您依赖于相邻的和一般的同级组合器, +, ~. 如果元素不是一般的前同级元素，它就不会起作用。

在此示例中，.expand不是前面的兄弟。因此解决方案是将input元素放在文档的根目录，然后使用选择器input[name='panel']:checked ~ label .rotate更改.rotate元素。请注意，~现在也使用通用兄弟组合器，而不是相邻的兄弟组合器，+.

不需要 JS -更新示例

修改后的 HTML：

<input type="checkbox" name="panel" class="hidden" id="panel"/>
<label for="panel">
  Click Me
  <div class="rotate">+</div>
</label>
<div class="expand">
  Content goes here.
</div>

更新的 CSS：

input[name='panel']:checked ~ label .rotate {
    transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

值得注意的是，我也将过渡属性移到了.rotate元素上。

于 2014-01-24T01:28:46.953 回答
1

jQuery解决方案：

http://jsfiddle.net/SinisterSystems/PUwh6/2/

使用IDsojQuery可以轻松地绘制出您正在做的事情，而无需到处搜索课程。

HTML：

<label for="panel">
  Click Me
  <div id="rotate">+</div>
</label>

CSS：

#rotate {
 width: 12px;
 float: right;
 font-size: 18px;
 margin-top: -6px;
 text-align: center;
 transition: all 1s ease;
 -o-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -webkit-transition: all 1s ease;
 }
#rotate.spin {
 transform: rotate(45deg);
 -o-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
}

jQuery：

$('#panel').on('click',function() {
  $('#rotate').toggleClass('spin');
});
于 2014-01-24T01:40:51.927 回答