Question

这是我对网站所做的极端简化，但这似乎是根本问题。

我有一个<div>，我想在用户单击某些文本时将其移动。借用this示例，我想添加一个不可见的<input>复选框和一个关联的<label>。

所提到的示例在我的浏览器中具有完整的功能，但是我的代码中的动画仅在注释<label>时有效。还有其他人遇到这个问题吗？我缺少错误吗？谢谢。

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

#page_euler {
  position: relative;
  background-color: gray;
  width: 200px;
  height: 200px;
  left: 0px;
  transition: all 0.5s;
}

.click:not(:checked)+#page_euler {
  left: 575px;
}

<input class="click" id="slide_euler" type="checkbox">

<!--
<label class="click" for="slide_euler">Click</label>
-->

<div id="page_euler"></div>

Here's the codepen

Answer 1

您正在使用next sibling combinator（+）。

如果取消注释标签，则div不再是输入的下一个同级。

请改用subsequent-sibling combinator（~）。

您还需要防止.click:not(:checked)与标签匹配。

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

#page_euler {
  position: relative;
  background-color: gray;
  width: 200px;
  height: 200px;
  left: 0px;
  transition: all 0.5s;
}

input.click:not(:checked)~#page_euler {
  left: 575px;
}

<input class="click" id="slide_euler" type="checkbox">

<label class="click" for="slide_euler">Click</label>

<div id="page_euler"></div>

Answer 2

选择器+中的.click:not(:checked)+#page_euler要求元素#page_euler是.click:not(:checked)元素的下一个兄弟元素。在两者之间添加label元素时，情况不再如此。

看到要隐藏复选框，您可以简单地将标签移动到其他位置，并将复选框元素保持在div元素的前面，或者可以向选择器添加+ label，如本示例所示代码段：

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

#page_euler {
  position: relative;
  background-color: gray;
  width: 200px;
  height: 200px;
  left: 0px;
  transition: all 0.5s;
}

.click:not(:checked) + label + #page_euler {
  left: 575px;
}

<input class="click" id="slide_euler" type="checkbox">
<label class="click" for="slide_euler">Click</label>

<div id="page_euler"></div>

Answer 3

您有2期。

1）您应该在+中使用.click:not(:checked) + #page_euler；应该使用~时是这样的：.click:not(:checked) ~ #page_euler。

+是立即同级，而不是任何同级。

2）您正在对输入和标签使用click类，我认为您需要在输入上使用类似checkbox的其他类，然后将选择器更新为：.checkbox:not(:checked) ~ #page_euler < / p>

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

#page_euler {
  position: relative;
  background-color: gray;
  width: 200px;
  height: 200px;
  left: 0px;
  transition: all 0.5s;
}

.checkbox:not(:checked) ~ #page_euler {
  left: 575px;
}

<input class="click checkbox" id="slide_euler" type="checkbox">


<label class="click" for="slide_euler">Click</label>


<div id="page_euler"></div>

<div> CSS动画在添加<label>之前有效

3 个答案: