css анимация выполнить onclick без javascript

Question

Я что-то новое в «css».

Я использую приведенный ниже код и он работает отлично: , но когда я перехожу # img6 от #main дел до другой DIV Он больше не работает .. кажется, что они должны быть в том же DIV работать отлично.

Я столкнулся с этой проблемой, но были решения с использованием java-скрипта. Можно ли по-другому поместить их в разные разделы только с помощью 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

это потому, что у вас есть селектор родственный в вашем CSS: ~

, если вы переместили #img6 в другой div, где я могу только представить, что нет брата и брата input[type=checkbox]:checked , то такой селектор в вашем CSS больше не сопоставляется.

Если вы не можете настроить целевой CSS-селектор, вам нужно будет использовать javascript для достижения того же результата.

Answer 2

Вы можете просто выбрать ребенка или родственника элемента, но не родителя. Поэтому в другом div вы не можете выбрать ничего вне div или самого div.

Для этого вам необходимо использовать JavaScript.

Answer 3

Вы можете обернуть все в обертку <div /> и поместить флажок рядом с ним. Проверьте это jsFiddle

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

Таким образом, когда все находится внутри оболочки, он должен работать