CSS「.div + .anotherdiv」無法正常工作

-1

https://jsfiddle.net/f962zL0h/ 嘿！我想點擊card1，所以它會擴大等（這是工作）。但我也需要動畫card2和card3。但是，當我這樣做：CSS「.div + .anotherdiv」無法正常工作

.card1 { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    float: left; 
    margin: 0.5em; 
    margin-top: 200px; 
    transition: all .3s ease-in-out; 
    position: absolute; 
} 

.card2 { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    float: left; 
    margin: 0.5em; 
    margin-top: 200px; 
    transition: all .3s ease-in-out; 
    position: absolute; 
    margin-left: 340px; 
} 

.card3 { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    float: left; 
    margin: 0.5em; 
    margin-top: 200px; 
    transition: all .3s ease-in-out; 
    position: absolute; 
    margin-left: 675px; 
} 

.card1:active { 
    margin: 0em; 
    width: 40%; 
    height: 100%; 
    position: fixed; 
} 

.card1:active + .card2 { 
    transform: scale(0) translatey(1000px); 
    opacity: 0; 
} 

.card1:active + .card3 { 
    transform: scale(0) translatey(1000px); 
    opacity: 0; 
}

它與卡2只是動，不card3，但他們已經得到了相同的設置和everything.Thanks這麼多的幫助傢伙！

來源

2016-01-20 Honzis Novák

+ selecteur是爲了接下來，〜這selecteur是爲許多接下來，即使其他之間的東西。我相信你需要.card1：active〜.card3 https://jsfiddle.net/f962zL0h/1/ –

@ GCyrillus的回答爲我工作。假設你希望其他兩個在你點擊卡片時消失。 – ingridly

它不適用於.card3，因爲.card1之後不是緊接着.card3。

而是使用~選擇：

.card1:active ~ .card2{ 
    transform: scale(0) translatey(1000px); 
    opacity: 0; 
} 
.card1:active ~ .card3{ 
    transform: scale(0) translatey(1000px); 
    opacity: 0; 
}

Updated JSFiddle。

來源

2016-01-20 22:09:42

CSS「.div + .anotherdiv」無法正常工作

回答

相關問題