在 CSS 中添加旋转悬停菜单

Question

我在菜单悬停时使用 css 旋转，但我遇到了问题。

我想要达到的目标如下。

当用户将鼠标悬停在图像“+”上时，它会旋转 45°，同时菜单显示在下方。 实际上图像“+”一直重置到原始位置并且菜单消失了。

我无法显示菜单和旋转 45° 的图像“+”。

这是小提琴： http://jsfiddle.net/4Ts7n/7/

非常欢迎您提出建议，谢谢。

HTML

<header class="clearfix">
<nav>
<div class="cross"><img src="http://www.acielouvert.net/dm/images/nav_plus.png" width="221" height="221" /></div>
<ul>
<li>PROJET</li>
<li>PRESSE</li>
<li>EXHIBITION</li>
<li>CONTACT</li>
</ul>
</nav>
</header>   

CSS

body {
background-color: #000;
}

nav ul {
list-style: none;
color: #fff;
font-size: 3.5rem;
text-align: center;
line-height: 3.5rem;
float: left;
opacity: 0;

-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;

-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;

-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
overflow:hidden;
}

nav :hover {
filter: alpha(opacity=1);
opacity: 1;
}

nav li {
color: #fff;
}

.cross {
margin: 55px 0 0 100px;
position: fixed;
text-align: left;

-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;

-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
overflow:hidden;
}

.cross:hover {
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
} 

Answer 1

您需要将悬停更改为nav:hover .cross 而不是.cross:hover

Example

如果你对你的 ul 做同样的事情，它会停止闪烁效果：

nav:hover ul {
    filter: alpha(opacity=1);
    opacity: 1;
}

Example