我想旋轉Hover上的鏈接

Question

鏈接位於ul li結構內。

<nav class="navCls1"> 
    <ul class="navigationLinkscls1"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Blog</a></li> 
    </ul> 
</nav> 

這樣做的CSS是如下

.navigationLinkscls1 li { 
    position:relative; 
    display:inline-block; 
    padding:10px; 
    //border:1px solid red; 
    width:100px; 
} 
.navigationLinkscls1 li a { 
    position:relative; 
    text-decoration:none; 
    //border:1px solid green; 
    padding:3px 20px 3px 20px; 
    box-shadow:5px 5px 11px #999999; 
    color:#000000; 
    background-color:#FFFFFF; 
    -webkit-transition: .25s linear; 
    -moz-transition: .25s linear; 
    -o-transition: .25s linear; 
    transition: .25s linear; 
} 
.navigationLinkscls1 li a:hover { 
    -webkit-transform:rotate(45deg); 
    -moz-transform:rotate(45deg); 
    -o-transform:rotate(45deg); 
    transform:rotate(45deg); 
} 

但代碼沒有運行。請幫忙。我在HTML5，CSS3方面比較新，我正在使用最新版本的crome。

jsFiddle

Answer 1

變化 .navigationLinkscls1 li a:hover 到 .navigationLinkscls1 li:hover。

Css旋轉不適用於display: inline;元素（並且'a'元素從瀏覽器中繼承此元素）。

您還可以添加代碼：

.navigationLinkscls1 li a{ 
    display: inline-block; 
} 

Answer 2

或者，添加顯示：inline-block的一個：

http://jsfiddle.net/Gdb52/

.navigationLinkscls1 li a{ 
position:relative; 
text-decoration:none; 
//border:1px solid green; 
padding:3px 20px 3px 20px; 
box-shadow:5px 5px 11px #999999; 
color:#000000; 
background-color:#FFFFFF; 
    display:inline-block; 

-webkit-transition: .25s linear; 
-moz-transition: .25s linear; 
-o-transition: .25s linear; 
transition: .25s linear; 
} 

Answer 3

使用此選擇你的懸停部分：.navigationLinkscls1 > li:hover

A jsFiddle：http://jsfiddle.net/bQ7BG/