css动画在没有javascript的情况下执行onclick

Question

我是"css“的新手。

我使用下面的代码，它工作得很好:但是当我将#img6从#main div移到另一个div时，它不再工作。它们似乎必须在同一个div中才能完美地工作。

我在谷歌上搜索了这个问题，但是有使用java script的解决方案，有没有其他方法可以仅仅使用css将它们放在不同的部门中？

我想使用这段代码在一个asp.net网页，我需要动画代码是在点击我的网页上的一个按钮执行。但是我也不能用asp.net按钮点击事件来做到这一点。我的动画代码似乎不能通过asp.net事件或方法正确执行...

HTML：

<div id="main">
  <label for="toggle-6">I'm a toggle</label>
  <input type="checkbox" id="toggle-6"/>
  <img id="img6" class="rotated-imag-45-6" src="image/cam.png" />
</div>

CSS：

input[type=checkbox]:checked ~ #img6 {
  transition-duration: 5s;
  transition-property: transform;
  transform: rotate(45deg);
}
input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
.rotated-imag-90-6 {
  display: block;
  margin: 20px;
}   

Answer 1

您只能选择元素的子元素或同级元素，而不能选择父元素。所以在另一个div中，你不能选择div之外的任何东西，也不能选择div本身。

为了实现这一点，你必须使用JavaScript。

Answer 2

您可以将所有内容包装在一个包装器<div />中，并将复选框放在它旁边。查看此jsFiddle

input[type=checkbox]:checked + .wrapper #img6 {
  transition-duration: 5s;
  transition-property: transform;
  transform: rotate(45deg);
}

这样，一旦所有东西都放在包装器中，它就应该可以工作了

Answer 3

这是因为您的CSS中有一个同级选择器：~

如果你“移动”到另一个#img6，我可以想象那里没有兄弟input[type=checkbox]:checked，那么在你的CSS中这样的选择器就不再匹配了。

如果你不能使用合适的CSS选择器，你需要使用javascript来达到同样的效果。