菜单项上的 css3 自定义动画效果不起作用

Question

我编写了以下代码，必须对菜单项内的按钮产生“脉动”效果

<p:menuitem>

这是样式:

<h:head>
  <link rel="stylesheet" type="text/css"/>
 <style>
        ul.ui-menu-child {
         white-space: nowrap;
         width: auto !important;
        }

 @-webkit-keyframes glow {
  0% {
    -webkit-box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);
    border-color: rgba(0,0,255,0.5);
  }
  100% {
    -webkit-box-shadow: 0 0 16px rgba(66, 140, 240, 1.0), 0 0 36px rgba(0, 140, 255, 1.0);
    border-color: rgba(0,0,255,1.0);
  }
 }
@-moz-keyframes glow {
  0% {
    -moz-box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);
    border-color: rgba(0,0,255,0.5);
  }
  100% {
    -moz-box-shadow: 0 0 16px rgba(66, 140, 240, 1.0), 0 0 36px rgba(0, 140, 255, 1.0);
    border-color: rgba(0,0,255,1.0);
  }
}
@-o-keyframes glow {
  0% {
    box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);
    border-color: rgba(0,0,255,0.5);
  }
  100% {
    box-shadow: 0 0 16px rgba(66, 140, 240, 1.0), 0 0 36px rgba(0, 140, 255, 1.0);
    border-color: rgba(0,0,255,1.0);
  }
}
@keyframes glow {
  0% {
    box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);
    border-color: rgba(0,0,255,0.5);
  }
  100% {
    box-shadow: 0 0 16px rgba(66, 140, 240, 1.0), 0 0 36px rgba(0, 140, 255, 1.0);
    border-color: rgba(0,0,255,1.0);
  }
}


.ui-widget:hover .ui-menuitem:hover .ui-corner-all:hover .ui-menu-parent:hover {
  -webkit-animation-name: glow;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;

  -moz-animation-name: glow;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: alternate;
  -moz-animation-timing-function: ease-in-out;

  -o-animation-name: glow;
  -o-animation-duration: 1s;
  -o-animation-iteration-count: infinite;
  -o-animation-direction: alternate;
  -o-animation-timing-function: ease-in-out;

  animation-name: glow;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

</style>
<meta name="viewport" content="width=device-width"/>

这是我在代码检查器/firebug 中看到的类

<li class="ui-widget ui-menuitem ui-corner-all ui-menu-parent" aria-haspopup="true" role="menuitem" style="width: 115px">

但它不起作用，为什么？

Answer 1

您应该在每个选择器之间添加一个逗号:

.ui-widget:hover,
.ui-menuitem:hover,
.ui-corner-all:hover,
.ui-menu-parent:hover {
    /* ... */
}

或者将所有类合并到一个选择器中:

.ui-widget.ui-menuitem.ui-corner-all.ui-menu-parent:hover {
    /* ... */
}