使用CSS轉換褪色2個元素，同時徘徊在第三個

恐怕如果我試圖包含每個相關的細節，爲了簡單起見，我會淹死每個人的代碼我做這個，所以你可以讓你的頭圍繞什麼，我試圖做的事：使用CSS轉換褪色2個元素，同時徘徊在第三個

編輯：

和實際的代碼我使用：

.box-4 .box-subtitle { 
    position:absolute; 
    display:block; 
    border-radius:0 4px 0 0px; 
    -moz-border-radius:0 4px 0 0px; 
    -webkit-border-radius:0 4px 0 0px; 
    background:#403f3f; 
    height:60px; 
    width:199px; 
    padding: 11px 23px 0 12px; 
    max-height: 1000px; 
    -webkit-transition: opacity 0.5s ease; 
    -moz-transition: opacity 0.5s ease; 
    -o-transition: opacity 0.5s ease; 
    transition: opacity 0.5s ease; 
} 


.box-4:hover .box-subtitle { 
    background:url(images/bg-box.gif) 0 0 repeat; 

} 

.box-subtitle span { 
    font-size:15px; 
    line-height:23px; 
    color:#fff; 
    text-transform:uppercase; 
    font-family: 'Maven Pro', sans-serif; 
    font-weight:700; 
    background:url(images/bg-subtitle.png) 0 2px no-repeat; 
    padding:0 0 0 32px; 
    display:inline-block; 
    -webkit-transition: opacity 0.5s ease; 
    -moz-transition: opacity 0.5s ease; 
    -o-transition: opacity 0.5s ease; 
    transition: opacity 0.5s ease; 
} 
.box-4:hover .box-subtitle span { 
    color:#a6e7f0; 
    background:url(images/bg-subtitle1.png) 0 2px no-repeat; 

}

我想想要發生的是，當您將鼠標懸停在較大的框中時，包含在該div內的div和span應該在單獨的屬性更改中淡入淡出。

最明顯的問題是，「這甚至可能？」我知道轉換是相對較新的，並且可能還存在一些錯誤，但是如果有辦法做到這一點，即使不是通過這種方法，如果您能夠啓發我如何實現它，我也會非常感激它。

編輯：

好吧，我設法用transition: background 1s ease, color 1s ease;得到<span>以正確的方式消失，因爲這些都是我想改變的唯一屬性。背景仍然構成挑戰，因爲我剛剛發現background-image尚未轉變爲一個支持的屬性。雖然我使用的是background: url(URL) 0 0 repeat;，但它仍然是一個背景圖片，我認爲這給我帶來了麻煩。有沒有人知道在背景圖像中淡入淡出的變通方法？（不透明度不起作用，因爲它會淡出整個div而不是僅僅改變背景）我曾經想過在懸浮狀態div頂部嵌套一個正常的狀態div，並使正常的不透明度狀態格轉換爲鼠標懸停。儘管如此，我仍然遇到了麻煩。如果某人能夠完成這樣的壯舉，請給我這個蝙蝠俠。

更多編輯：

這裏是我的問題的更新的jsfiddle，我不能得到的div到右，即使我有他們絕對定位在彼此相對定位包內的z-index堆棧。我錯過了什麼嗎？

http://jsfiddle.net/Ep2xa/1/

來源

2013-11-21 Mockingbird