css - 当通过 css 将鼠标悬停在它的父级上时，如何旋转子级？

Question

这是我的 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);
}

但它不起作用。你能帮帮我吗？

Answer 1

请在下面找到工作示例:

http://jsfiddle.net/WK3Q6/403/

应该是:

.submenu > li:hover a span{

代替:

.submenu > li :hover  a > span{

我还从元素中删除了“隐藏”类，以便我们可以看到动画。

谢谢，亚当