用於移動圖像和div的CSS3動畫

Question

我是新來的CSS3動畫，我遇到了試圖創建幻燈片菜單的小問題。

我有以下的HTML代碼：

這CSS代碼：

#hackyCheckBox{display: none;} 

.test{ 
    height: 30px; 
    width: 50px; 
} 

#greenPart{height: 100px; width: 300px; background-color: green;} 

.test, #greenPart{ 
    -webkit-transition-duration: 1s; 
    -moz-transition-duration: 1s; 
    -ms-transition-duration: 1s; 
    -o-transition-duration: 1s; 
    transition-duration: 1s; 

    -webkit-transition-property: -webkit-transform; 
    -moz-transition-property: -moz-transform; 
    -ms-transition-property: -ms-transform; 
    -o-transition-property: -o-transform; 
    transition-property: transform; 
} 

#hackyCheckBox:checked + label img.test{ 
    transform:   translate(160px,0px); /* CSS3 */ 
    -moz-transform: translate(160px,0px); /* Firefox */ 
    -webkit-transform: translate(160px,0px); /* Webkit */ 
    -o-transform:  translate(160px,0px); /* Opera */ 
    -ms-transform:  translate(160px,0px); /* IE 9 */ 
} 

我的問題是，當我點擊了蝙蝠俠的標誌，只標識移動，而不是股利。 這裏的的jsfiddle如果它可以幫助你：http://jsfiddle.net/1yLqzyjf/2/

Answer 1

移動的div#greenPart和img元素內label和使用適當的選擇爲 - >#hackyCheckBox:checked + label div#greenPart。

#hackyCheckBox { 
 
    display: none; 
 
} 
 
.test { 
 
    height: 30px; 
 
    width: 50px; 
 
} 
 
#greenPart { 
 
    height: 100px; 
 
    width: 300px; 
 
    background-color: green; 
 
} 
 
.test, 
 
#greenPart { 
 
    -webkit-transition-duration: 1s; 
 
    -moz-transition-duration: 1s; 
 
    -ms-transition-duration: 1s; 
 
    -o-transition-duration: 1s; 
 
    transition-duration: 1s; 
 
    -webkit-transition-property: -webkit-transform; 
 
    -moz-transition-property: -moz-transform; 
 
    -ms-transition-property: -ms-transform; 
 
    -o-transition-property: -o-transform; 
 
    transition-property: transform; 
 
} 
 
#hackyCheckBox:checked + label div#greenPart { 
 
    -webkit-transform: translate(160px, 0px); 
 
    -ms-transform: translate(160px, 0px); 
 
    transform: translate(160px, 0px); 
 
}

<input type="checkbox" id="hackyCheckBox"> 
 
<label for="hackyCheckBox"> 
 
    <div id="greenPart"> 
 
    <img class="test" src="http://www.vectortemplates.com/raster/batman-logo-big.gif" /> 
 
    </div> 
 
</label>