Question

我花了很长时间在div内制作label s的css动画（按下启动动画的标签），只是意识到拥有div s label内的内容不正确。有谁知道快速解决这个问题？这是有问题的HTML：

<input type="checkbox" id="spinner" />
  <label for="spinner" id="burger">
  <div id="burger-div">
    <div class="spinner diagonal part-1"></div>
    <div class="spinner horizontal"></div>
    <div class="spinner diagonal part-2"></div>
    </div>
  </label>

如果它相关的话，动画它的css：

#spinner[type=checkbox]:checked~#burger .horizontal {
    opacity: 0;
}
#spinner[type=checkbox]:checked~#burger .diagonal.part-1 {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    margin-top: 10px;
}
#spinner[type=checkbox]:checked~#burger .diagonal.part-2 {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    margin-top: -16px;
}

我感谢任何帮助。

Answer 1

有效的HTML是使用<span>而不是<div>。原因是label表示文本构造，div表示容器对象。

标签内的div是否有任何修复

1 个答案: