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{

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

谢谢，亚当

如何通过css将孩子悬停在父母的父母身上时如何轮换？

1 个答案: