html - 我想在 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 方面相对较新，我正在使用最新版本的 crom。

jsFiddle

Answer 1

更改 .navigationLinkscls1 li a:hover 为 .navigationLinkscls1 li:hover。

Css 旋转对元素不起作用display: inline;（并且“a”元素从浏览器继承了它）。

您还可以添加代码：

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

Answer 2

或者，将 display: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

一个 jsFiddle：http: //jsfiddle.net/bQ7BG/