CSS 3懸停問題

Question

我在側欄中有一個div。整個div是一個鏈接，將您帶到網站的另一部分。

現在，在div的左側有背景圖像這樣的小花朵。當您將鼠標懸停在div花應該

1. 旋轉進出
2. 褪色。

如果我在整個div上應用動畫，div將旋轉，而不是背景圖像。所以我解決了這個問題：花是在一個絕對定位的div，並旋轉和淡入和淡出不斷（如果我將動畫應用於：懸停，那麼只有當我直接懸停在圖像上時它纔會旋轉）。

Answer 1

這是你想要的嗎？

http://jsfiddle.net/kgFdJ/2/

#foo { 
    width: 300px; 
    height: 500px; 
    background-color: #eee; 
    position: relative; 
} 

#foo:after { 
    content: ""; 
    width: 20px; 
    height: 20px; 
    background-color: #f00; 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    -moz-transition: all 1s; 
    -o-transition: all 1s; 
    -webkit-transition: all 1s; 
    transition: all 1s 
} 

#foo:hover:after { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    transform: rotate(45deg) 
} 

但要知道，使用僞選擇另一個僞選擇可以得到在某些瀏覽器一個小馬車，因此，你可以做這樣的事情：

HTML

<div id="foo"> 
    <div class="flower"></div> 
</div> 

CSS

#foo:hover > div.flower ...