css - 在 CSS 中添加旋转悬停菜单

Question

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

我想要实现的是以下内容。

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

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

这是 fiddle : 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