css動畫執行沒有javascript的onclick

我使用下面的代碼，它工作正常：但是當我從#main div移動＃img6到另一個div它不工作了.. 看來，他們必須在同一個div才能完美工作。

我googled這個問題，但有解決方案使用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; 
}

來源

2015-06-17 Farnoush

這是因爲你有一個兄弟選擇在你的CSS：~

如果你'移動'#img6到另一個div，在那裏我可以想象沒有兄弟input[type=checkbox]:checked ，那麼你的CSS中的這種選擇器就不再匹配了。

如果您無法使用適當的CSS選擇器進行定位，則需要使用javascript來實現相同的結果。

來源

2015-06-17 13:34:38 Luca

您可以選擇一個元素的孩子或兄弟姐妹，但不是父母。所以在另一個div中，你不能選擇div以外的任何東西，也不能選擇div本身。

您必須使用JavaScript才能實現此目的。

來源

2015-06-17 13:36:24 KittMedia

你可以將所有東西都包裝在一個包裝<div />中，並將複選框放在旁邊。看看這個jsFiddle

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

這樣，一旦一切都在包裝裏面，它應該工作

來源

2015-06-17 13:47:07 Jackson

css動畫執行沒有javascript的onclick

回答

相關問題