懸停時更改多個CSS元素

Question

我正在嘗試使用CSS3實現效果，我想從圖形的底部滑動figcaption，並在懸停時將圖形向上滑動。

或多或少像顯示此示例： http : //tympanus.net/Tutorials/CaptionHoverEffects/index3.html

不幸的是，當鼠標懸停在圖形上時，figcaption不會顯示（它不會改變其不透明度，也不會翻譯）

這是我正在使用的代碼：

#figure:hover img{
options} 

它有效，但是

#figure:hover figcaption{

options}

無法正常工作，為什么將懸停僅應用於img元素而不是圖？ http://jsfiddle.net/GKfQ2/

在此先感謝答題者:)

Answer 1

您尚未將變換值應用於figcaption的懸停狀態

JSfiddle演示

修訂的CSS

li {
    list-style: none;
    display: inline-block;
    overflow: hidden;
}

#featured figure{
    margin:0;
    position:relative;
}

#featured figure img {
    max-width:100%;
    display:block;
    position:relative;
    -webkit-transition: -webkit-transform 0.7s;
    -moz-transition: -moz-transform 0.7s;
    -o-transition: -o-transform 0.7s;
    transition:transform 0.7s;}

figure:hover img{

    transform: translateY(-50px);
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -ms-transform: translateY(-50px);

}

figure figcaption{
    position:absolute;
    bottom:0;
    padding:14px;
    background: #ddd;
    width:100%;
    height:50px;
    opacity:1;
/* the relevant bits */
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -o-transform: translateY(100%);    
    transform: translateY(100%);
    -webkit-transition: -webkit-transform 0.7s;
    -moz-transition: -moz-transform 0.7s;
    transition: transform 0.7s;
}

figure:hover figcaption{
    opacity:1;
/* the relevant bits */
    -webkit-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -o-transform: translateY(0%);    
    transform: translateY(0%);

}

h4{
    font-size:18x;}

span{font-size:13px;
    color:black;}