如何通過CSS將鼠標懸停在其父項的父項上時旋轉這些子項？

Question

這裏是我的HTML代碼：

<ul class="menu"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#s1"><span class="glyphicon glyphicon-bookmark" aria-hidden="true"></span> Menu 1</a> 
    <ul class="submenu"> 
     <li><a href="#"><span class="glyphicon glyphicon-star-empty hidden" aria-hidden="true"></span> Submenu a</a></li> 
     <li><a href="#"><span class="glyphicon glyphicon-star-empty hidden" aria-hidden="true"></span> Submenu b</a></li> 
    </ul> 
    </li> 
</ul> 

我想旋轉鼠標懸停在子菜單中的li元素時定義範圍的圖標。 我的CSS代碼是：

.submenu > li :hover a > span{ 
    transition: 1s; 
    -webkit-transition: 1s; 
    -moz-transition: 1s; 
    -o-transition: 1s; 

    -webkit-transform: rotateY(85deg); 
    -moz-transform: rotateY(85deg); 
    -ms-transform: rotateY(85deg); 
    -o-transform: rotateY(85deg); 
    transform: rotateY(85deg); 
} 

但它不起作用。你可以幫我嗎？

Answer 1

請在下面找到工作示例：

http://jsfiddle.net/WK3Q6/403/

它應該是：

.submenu > li:hover a span{ 

相反的：

.submenu > li :hover a > span{ 

我也去掉 '隱藏的' 從類這些元素讓我們可以看到動畫。

謝謝， 亞當