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

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

我想在Hover上旋转一个链接

3 个答案: