• <legend id='Nhecu'><style id='Nhecu'><dir id='Nhecu'><q id='Nhecu'></q></dir></style></legend>

      <small id='Nhecu'></small><noframes id='Nhecu'>

      <tfoot id='Nhecu'></tfoot>
        <bdo id='Nhecu'></bdo><ul id='Nhecu'></ul>
      <i id='Nhecu'><tr id='Nhecu'><dt id='Nhecu'><q id='Nhecu'><span id='Nhecu'><b id='Nhecu'><form id='Nhecu'><ins id='Nhecu'></ins><ul id='Nhecu'></ul><sub id='Nhecu'></sub></form><legend id='Nhecu'></legend><bdo id='Nhecu'><pre id='Nhecu'><center id='Nhecu'></center></pre></bdo></b><th id='Nhecu'></th></span></q></dt></tr></i><div id='Nhecu'><tfoot id='Nhecu'></tfoot><dl id='Nhecu'><fieldset id='Nhecu'></fieldset></dl></div>

        css3:动画后悬停不起作用

        时间:2023-11-29

          <tfoot id='Iit97'></tfoot>

          <legend id='Iit97'><style id='Iit97'><dir id='Iit97'><q id='Iit97'></q></dir></style></legend>

            <bdo id='Iit97'></bdo><ul id='Iit97'></ul>
          • <i id='Iit97'><tr id='Iit97'><dt id='Iit97'><q id='Iit97'><span id='Iit97'><b id='Iit97'><form id='Iit97'><ins id='Iit97'></ins><ul id='Iit97'></ul><sub id='Iit97'></sub></form><legend id='Iit97'></legend><bdo id='Iit97'><pre id='Iit97'><center id='Iit97'></center></pre></bdo></b><th id='Iit97'></th></span></q></dt></tr></i><div id='Iit97'><tfoot id='Iit97'></tfoot><dl id='Iit97'><fieldset id='Iit97'></fieldset></dl></div>

            <small id='Iit97'></small><noframes id='Iit97'>

                  <tbody id='Iit97'></tbody>
                  本文介绍了css3:动画后悬停不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

                  问题描述

                  我有一个 DIV,它在 :hover 时将 bgcolor 更改为蓝色.按钮单击添加了将 bgcolor 设置为绿色的类.但是现在 :hover 不起作用(bgcolor 不会变成蓝色).

                  I have a DIV which changes bgcolor to blue when :hover. Button click adds class which animates bgcolor to green. But now :hover wont work (bgcolor wont change to blue).

                  为什么?

                  http://jsfiddle.net/EstSiim/me7t055c/

                  HTML:

                  <div class="box"></div>
                  <button class="animate-btn">Animate</button>
                  

                  CSS:

                  .box {
                          background-color: red;
                          width: 200px;
                          height: 200px;
                      }
                      .box:hover {
                          background-color: blue;
                      }
                  
                      .trigger-bg-change {
                          -webkit-animation: bg-change 1s ease 0 1 forwards;
                          animation: bg-change 1s ease 0 1 forwards;  
                      }
                  
                      @-webkit-keyframes bg-change {
                          0% {background-color:red;}
                          100% {background-color:green;}
                      }
                      @-keyframes bg-change {
                          0% {background-color:red;}
                          100% {background-color:green;}
                      }
                  

                  JS:

                  $(function() {
                          $('.animate-btn').on('click', function() {
                              console.log('hey');
                              $('.box').addClass('trigger-bg-change');
                          });
                  });
                  

                  推荐答案

                  DEMO

                  您可以对 .trigger-bg-change 使用以下 CSS 规则:

                  You can use the following CSS rules for .trigger-bg-change instead:

                  .trigger-bg-change {
                      background-color: green;
                      -webkit-animation: bg-change 1s ease 0 1 none;
                      animation: bg-change 1s ease 0 1 none;  
                  }
                  

                  通过将 animation-fill-mode 属性从 forwards 更改为 none,动画将不会将样式应用于其后的元素已执行,因此 .box:hover 的规则不会被覆盖.

                  By changing the animation-fill-mode property from forwards to none, the animation will not apply the styles to to element after it has executed, so the rules for .box:hover will not get overridden.

                  这篇关于css3:动画后悬停不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

                  上一篇:元素从鼠标下方移出后,悬停状态为粘性(在所有浏览器中) 下一篇:css伪类:悬停不工作

                  相关文章

                • <legend id='a8AFm'><style id='a8AFm'><dir id='a8AFm'><q id='a8AFm'></q></dir></style></legend>
                • <small id='a8AFm'></small><noframes id='a8AFm'>

                    <tfoot id='a8AFm'></tfoot>
                      <i id='a8AFm'><tr id='a8AFm'><dt id='a8AFm'><q id='a8AFm'><span id='a8AFm'><b id='a8AFm'><form id='a8AFm'><ins id='a8AFm'></ins><ul id='a8AFm'></ul><sub id='a8AFm'></sub></form><legend id='a8AFm'></legend><bdo id='a8AFm'><pre id='a8AFm'><center id='a8AFm'></center></pre></bdo></b><th id='a8AFm'></th></span></q></dt></tr></i><div id='a8AFm'><tfoot id='a8AFm'></tfoot><dl id='a8AFm'><fieldset id='a8AFm'></fieldset></dl></div>
                        <bdo id='a8AFm'></bdo><ul id='a8AFm'></ul>