我如何使用嵌套的轉變與上海社會科學院

有這樣的青菜轉換：我如何使用嵌套的轉變與上海社會科學院

 .card{ 
     transition: all 0.5s ease; 
     position: relative; 
     height: auto; 
     } 

     .artistInfo{display: none;} 

     .card:hover{ 
     box-shadow: 10px 10px rgba(128, 128, 128, 0.37); 
     margin-top: -3%; 
     .artistInfo{ 
      display: block; 
     } 
     }

的懸停工作正常，而轉變工作太除了.artistInfo過渡。

來源

2017-04-09 imjustaguy

你不能動畫顯示屬性。你可以做的是動畫不透明度

.card { 
    transition: all 0.5s ease; 
    position: relative; 
    height: auto; 
} 

.artistInfo { 
    opacity: 0; 
    position: absolute; 
} 

.card:hover { 
    box-shadow: 10px 10px rgba(128, 128, 128, 0.37); 
    margin-top: -3%; 
    &+.artistInfo { 
    opacity: 1; 
    } 
}

http://codepen.io/anon/pen/XMLvqZ

來源

2017-04-09 06:06:40

沒有工作，因爲即時通訊嘗試從另一個元素懸停 – imjustaguy

它是下一個兄弟元素還是'.card'的孩子？ –

它的下一個元素 – imjustaguy

也許是因爲「}」是在不正確的地方「.card：懸停」

正確：

.card{ 
    transition: all 0.5s ease; 
    position: relative; 
    height: auto; 
} 

.artistInfo{display: none;} 

.card:hover{ 
    box-shadow: 10px 10px rgba(128, 128, 128, 0.37); 
    margin-top: -3%; 
} 
.artistInfo{ 
    display: block; 
}

來源

2017-04-09 05:47:05

沒有，它在正確的地方，因爲當我懸停.card的.artist應該出現，並能正常工作，但沒有工作在過渡顯示：塊，只工作箱陰影和邊緣轉換 – imjustaguy

你的嵌套是正確的，你只是沒有一個過渡你的'.artistInfo'類。更新到這應該工作：

.card{ 
    transition: all 0.5s ease; 
    position: relative; 
    height: auto; 
} 

.artistInfo{ 
    opacity: 0; 
    display:none; 
    transition: all 0.5s ease 
} 

.card:hover{ 
    box-shadow: 10px 10px rgba(128, 128, 128, 0.37); 
    margin-top: -3%; 
    .artistInfo{ 
     opacity: 1; 
     display: block; 
     transition: all 0.5s ease 
    } 
}

來源

2017-04-09 05:54:22 Deanmv

它不工作，我認爲這個問題是因爲嵌套的.artistInfo沒有他自己的懸停，這就是轉換的工作方式，但我仍然試圖甩尾 – imjustaguy

從內存中，您可能無法在顯示屬性上進行轉換。我更新了以上真正的過渡可見不透明屬性。希望工程！編輯：你也可能不得不刪除顯示屬性，但我不知道如果這會導致您的HTML兄弟姐妹大小問題沒有看到頁面 – Deanmv

我如何使用嵌套的轉變與上海社會科學院

回答

相關問題