这是我的 HTML 代码:
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#s1"><span class="glyphicon glyphicon-bookmark" aria-hidden="true"></span> Menu 1</a>
<ul class="submenu">
<li><a href="#"><span class="glyphicon glyphicon-star-empty hidden" aria-hidden="true"></span> Submenu a</a></li>
<li><a href="#"><span class="glyphicon glyphicon-star-empty hidden" aria-hidden="true"></span> Submenu b</a></li>
</ul>
</li>
</ul>
当鼠标悬停在子菜单中的 li 元素上时,我想旋转在 span 中定义的图标。 我的 CSS 代码是:
.submenu > li :hover a > span{
transition: 1s;
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-webkit-transform: rotateY(85deg);
-moz-transform: rotateY(85deg);
-ms-transform: rotateY(85deg);
-o-transform: rotateY(85deg);
transform: rotateY(85deg);
}
但它不起作用。你能帮帮我吗?
最佳答案
请在下面找到工作示例:
http://jsfiddle.net/WK3Q6/403/
应该是:
.submenu > li:hover a span{
代替:
.submenu > li :hover a > span{
我还从元素中删除了“隐藏”类,以便我们可以看到动画。
谢谢, 亚当
关于css - 当通过 css 将鼠标悬停在它的父级上时,如何旋转子级?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33735816/